I am developing an app Clibu which uses waitForImages. The element containing the images can be removed from the dom, before waitForImages completes. In this scenario I'd like a way to cleanup the img.on('load') event handles that waitForImages adds.

I've looked through the code and reads the doc's and can't see a way to accomplish this.

Hey, after the new version 1.6.3 is released, I get a strange version problem for jquery:

bower install

Unable to find a suitable version for jquery, please choose one:
    1) jquery#~1.8 which resolved to 1.8.3+1 and is required by waitForImages#1.6.3 

Now I am using jquery 2.1.1 for my project. Can you modify the dependency to accept more recent versions?

Thanks!

I would like to use waitForImages only in a container. There is just one header css background-image inside, load dynamically xith php.

I check the console, It's seems to work on last version of chrome browser but not on Firefox and Safari. With these too last browser, the callback is execute only after all images on the page are loaded.

I tried lot of modifications :

• use an ID for the container instead of Class
• use the specific hasImageProperties on my background-image div ...

my code:

<div class="inner-header" id="inner-header"> <div id="header-cover "class="header-cover cover" style="background-image:url(img.jpg);"></div> </div>

$('.inner-header').waitForImages({

        finished: function() {
            // my callback
            },  
            waitForAll: true

        });

Do you have any suggestion ? Thanks for your work.

Willy

Hi, Great little tool this - is it possible to get the callback to happen when lets say 50% of the images have loaded? I have a slider with a lot of images - say 70 images in the slider - each 250kb... so waiting till that entire lot has downloaded before starting the carousel is pretty painful on slow connections... Could I use waitForImages to instruct it to wait for 30% of the images to load then allow me to call my custom function to initiate the slider? Any ideas?

I'm trying to use waitForImages in a page with css @import and loading dynamic content with $.ajax() and none of the background images or the img tags of the called page are preloaded.

I'm not sure if #64 fixes only srcset attributes that include densitiy descriptors (1x, 2x)?. I use the srcset attribute with width descriptor and the browser always loads two images. E.g. <img src="{url}/s,x,586,y,0/{img_id}" srcset="{url}/s,x,293,y,0/{img_id} 293w, {url}/s,x,440,y,0/{img_id} 440w, {url}/s,x,586,y,0/{img_id} 586w" sizes="(max-width: 520px) 100vw, 15vw" />

I use the plugin this way: $(element).waitForImages({ finished: function() {...}, waitForAll: true });

$(element) has two descendant images that should be loaded before some adjustments take place.

Thanks in advance

Does as the commit suggests. Has support for attributes, including srcset syntax. Down the line it could be improved to fire a callback when all relevant srcset images have loaded.

It looks like the library works only elements that are children of the selector. Any particular reason? In my case, I prefer waiting only on specific images, so rather than specifying a container, the selector points directly to the image. Unfortunately, waitForImages doesn't find the src in that case..

// doesn't work
$('<img src="..." />')
    .appendTo('body')
    .waitForImages()
    .then(function() {
        console.log('executed immediately, because image not detected');
    });

I use waitForImages to reveal the webpage only after all background CSS and img finish loading. But some images are from other host.

It would be good to have the following features:

1. Wait for images from the same domain only
2. Wait for background CSS images only

Hi.

As this plugin creates a stub image element for each matched image and attachs the load event to them, it derives on two undesired (at least from me) events:

• Images removed from DOM before they are fully loaded keep downloading in the background and consuming useless bandwith
• The plugin fires loaded events for images that are not on the document anymore

I could fix this with two keystrokes, but honestly I don't understand why did you take this approach instead of attaching the events directly to the images on the document. Is this a desired effect? Am I missing something?

It'd be really nice if I could include waitForImages in my bower.json file. As per my #30 issue, it would be a good idea to make JQuery a requirement with a minimum compatible version.

I will put this on hold until the native Promise object has good browser support, otherwise I would need to bundle an implementation which would make this plugin larger than required.