Is it necessary to add an <img> to the DOM in order to preload it?
$(function whenDOMIsHappy(){
var $img = $('<img />')
.load(loadHandler)
.error(errorHandler)
.attr({src:"squatchordle-squashgarden.jpg"});
$img.appendTo('body .preloads'); // is this at all necessary?
});
// assuming <div class="preloads" style="display:none;"></div> exists in <body>.
I've seen mixed messages about this technique. I'm using jQuery, but the question applies to vanilla-people too.
I am interested in keeping this working in all major browsers.
Is it necessary to add an <img> to the DOM in order to preload it?
$(function whenDOMIsHappy(){
var $img = $('<img />')
.load(loadHandler)
.error(errorHandler)
.attr({src:"squatchordle-squashgarden.jpg"});
$img.appendTo('body .preloads'); // is this at all necessary?
});
// assuming <div class="preloads" style="display:none;"></div> exists in <body>.
I've seen mixed messages about this technique. I'm using jQuery, but the question applies to vanilla-people too.
I am interested in keeping this working in all major browsers.
Share Improve this question edited Oct 28, 2013 at 20:10 ChaseMoskal asked Oct 28, 2013 at 19:51 ChaseMoskalChaseMoskal 7,6917 gold badges41 silver badges56 bronze badges 6- As far as I know, yes, but I don't see the problem with it. Execute the script after dom ready and the client will not notice a thing. – Bram Vanroy Commented Oct 28, 2013 at 20:00
-
what is in
loadHandler? – Fresheyeball Commented Oct 28, 2013 at 20:01 - @BramVanroy: I should have clarified: I'd prefer to avoid adding elements to the DOM if I don't have to. – ChaseMoskal Commented Oct 28, 2013 at 20:05
- @Fresheyeball: Does it matter? I haven't gotten so far yet :) -- I just want to know how to preload an image properly, without knowing what I'll do once I've succeeded. – ChaseMoskal Commented Oct 28, 2013 at 20:15
-
1
I imagine objections to this technique e from concern that this is an abuse of HTML, which -- in a perfect world -- should be used to describe the layout of the page. By adding an invisible
<div>solely for image preloading, you've added structural markup that does not contribute to the content or meaningful semantic structure of the page. (I don't know enough about it to agree or disagree strongly with that viewpoint.) However, doesn't your first chain of jQuery (building the<img>and setting itssrc) trigger a preload, even without adding it to the DOM? – apsillers Commented Oct 28, 2013 at 20:19
3 Answers
Reset to default 3All browsers I've tested do load images even if they're not in the DOM. You can test this with https://jsfiddle/84tu2s9p/.
const img = new Image();
img.src = "https://picsum.photos/200/300";
img.onload = () => console.log("loaded");
img.onerror = err => console.error(err);
- Safari 13, 11.1, 10.1
- Edge 18
- Firefox 72, 70, 62
- Chrome 78, 71
- Opera 64
- IE11
(Not meant to be an exhaustive list. I just tried a variety of versions and browsers.)
There's also the new image.decode() API that is intended for this use case of preloading images and avoids potential dropped frames when actually decoding the image to render it. Edge doesn't support it yet (Chromium-based Edge will though).
Given that HTML Canvas can use images without them being in the DOM, I think they have to load images.
as opposed to creating and then appending elements to the dom, why not just initialize a new image in javascript, then set its source to your images URL. this method should load your image without actually applying it to an element or rendering it on the dom - YET... take a peek:
someImageArray[0] = new Image();
someImageArray[0].src = "http://placehold.it/700x200/";
from here you are free to do what you wish with that image using javascript - render it directly in canvas or create an element out of it. however you might not even have to do anything. say if its already being referenced in other ajax based content. provided the URL is identical, the browser should use the cached version to draw the dom.
hope this helps here is a reference to a decent article about pre-loading with a few more options...
There is no guarantee that Images will be preloaded if you don't add it to the DOM! If you don't add it, the JavaScript Compiler can aggressively garbage collect the Image before it tries to load, because the element is not used at all.
This currently happens in firefox! There your images will not be preloaded if you don't add them to the DOM! - So be on the safe side and add them.