How to tell if this image has loaded

Question

I have this code on my page:

<div class="titleCard" id="first" style="background-image:url('img/path.jpg'); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/path.jpg',sizingMethod='scale'); -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/path.jpg',sizingMethod='scale')\";">

How in jquery can I test whether the image has loaded? I want to have a title fade up on top of the image once it's done loading.

This seems to be different from other loading issues because the .load() function doesn't work here -- the image has no id. Calling it '#first' or '#first img' also doesn't work. I don't want to check whether all images or loaded, just this one. Binding the load function also doesn't seem to work.

[This](http://stackoverflow.com/questions/5424055/check-if-images-are-loaded) or [This](http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached) might help — Dmytro, Jun 12 '14 at 15:20
using `.load()` is tough because it creates issues if the image is cached — Adjit, Jun 12 '14 at 16:00
Have you read "Caveats of the load event when used with images" on the documentation page? — Sumurai8, Jun 12 '14 at 16:01
@LauraNMS look at this plugin https://github.com/desandro/imagesloaded — Adjit, Jun 12 '14 at 16:03

score 0 · Answer 1 · answered Jun 12 '14 at 17:47

0

You can use JS to load the image in memory and listen to the onload event there. You'll need to set the default opacity, then fade in on your onload event.

var tmp = new Image();
tmp.onload = function() { ... };
tmp.src = "....";

answered Jun 12 '14 at 17:47

Diodeus - James MacFarlane

107,156
31
147
171

How to tell if this image has loaded

1 Answers1