Cancel single image request in html5 browsers

by

This is the only way that I managed to get it to work in all modern browsers (Chrome, Safari, Mobile-Safari, Firefox, and IE9).

  • Load an empty and hidden iframe
  • append an image tag to the body in the iframe
  • when the img.onload completes, you can use that image dom element to draw to an html5 canvas with drawImage()
  • if you want to cancel the load, issue a stop() on the iframe‘s contentWindow (or execCommand("stop", false) on contentDocument in IE).
  • after you cancel a image load, you can reuse the iframe to load more images.

I created a class for this, and put the coffeescript code (and its compiled javascript) on github:
Cancelable Html5 Image Loader

If you want to play with it, I also created a jsfiddle to test it out. Remember to start Fiddler2 (or something like it) to see that the actual network request is really being canceled.

More Related Contents:

  1. canvas- Cropping images in different shapes
  2. How can I modify with css an image appended with javascript?
  3. How do I make two images fade in/out repeatedly? [closed]
  4. Check if an image is loaded (no errors) with jQuery
  5. Changing the image source using jQuery
  6. Asynchronously load images with jQuery
  7. Is Safari on iOS 6 caching $.ajax results?
  8. Get pixel color from canvas, on mousemove
  9. Resize image with javascript canvas (smoothly)
  10. How do you cache an image in Javascript
  11. How to load all the images from one of my folder into my web page, using Jquery/Javascript
  12. Disable dragging an image from an HTML page
  13. I want to do animation of an object along a particular path
  14. Load image with jQuery and append it to the DOM
  15. Draw border around nontransparent part of image on canvas
  16. How do I abort image load requests without using window.stop()
  17. jQuery equivalent of getting the context of a Canvas
  18. Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH
  19. HTML5 responsive canvas: resizing the browser canvas draw disappear
  20. Get mouse position within div? [duplicate]
  21. How to get the image size (height & width) using JavaScript
  22. ‘pageshow’ is not received when pressing “back” button on Safari on *IPad”
  23. Add image in pdf using jspdf
  24. jQuery resize to aspect ratio
  25. jQuery, JavaScript, HTML: how to load images after everything else is loaded?
  26. Center an Image vertically and horizontally using CSS
  27. Cropping with drawImage not working in Safari
  28. How do I get natural dimensions of an image using JavaScript or jQuery?
  29. Remove selected file(s) before upload with Javascript
  30. Crop image white space automatically using jQuery

Leave a Comment