JQuery: dynamic image processing (pending download)

Question

I'm trying to write a plugin with a built-in function to wait until all the images that are on the page are loaded before they are executed by themselves. $(window).load()only works when the page loads, but if someone wants to pull some HTML via AJAX containing images, it does not work.

Is there a good way to do this and implement it so that it can be self-contained in the plug-in? I tried to get hung up on $('img').complete, and I know it does not work (the image is never loaded, and the browser crashes with the error "script takes too long to complete"). For an example of what I'm trying to do, go to the page where I want to place the plugin at:

http://www.simplesli.de

If you go to the “more use” section (click on it in the navigation bar), you will see that the image slide show will not load properly. I know that the current code does not work, but it just hangs on until I understand anything.

Edit: try this solution, but it just doesn't work:

if($('.simpleSlide-slide img').size() > 0) {
    var loaded_materials = $('.simpleSlide-slide img').get();
} else {
    var loaded_materials = $('.simpleSlide-slide').get();
}

$(loaded_materials).live('load', function() {
         /* Image processing and loading code */
    });

Answer 1

, , , , , Naugtur , :

var no_of_images = $('img').size();

$.extend(no_of_images);

if(no_of_images > 0) {

    var images = new Array();
    var i = 0;
    $('img').each( function() {
        images[i] = $(this).attr('src');
        i++;
    });

    i = 0;

    $(images).each( function(){
        var imageObj = new Image();
        imageObj.src = images[i];
        $(imageObj).load( function() {
            no_of_images--;
            i++;
            if(no_of_images == 0){
                functionToPerform();
            }
        });
    });
} else {
    functionToPerform();
}

, , . , . . , , , , . , , , . , , . ( ), , . . , -.

: " Image() $.load(), , jQuery jQuery- . ( ). Image() .onLoad, , , , .

, , . , , . functionToPerform() , , ( ). Toodles.

Answer 2

, ajaxSuccess, .

$.ajaxSuccess(function(){
 $('img').load(function(){
  //Your code here
 });
});

:

$.ajaxSuccess(function(){
 $('img:not(.loaded)').addClass('.loaded').bind('load',function(){
  //Your code here
 });
});

- , , html . setTimeout .

[]

<img src="something" onload="$.imgHello()" /> $.imgHello(), , . , .

Answer 3

$('img').complete , , , . setTimeout, . .

$.get("whatever",function(html) {
   $('#foo').html(html);
   var images = getTheImages();
   function checkImages() {
      var done = true;
      $.each(images,function() {
         done = done && this.complete;
         return done;
      });
      if(done) {
        fireEvent();
      } else {
        setTimeout(checkImages,100); // wait at least 100 ms and check again
      }
   }
});

Answer 4

live() img?

$('img').live('load', function ()
{
    alert("image loaded: "+this.src);
});

, . live() , , jQuery. live() bind(). - :

if($('.simpleSlide-slide img').size() > 0) {
    var loaded_materials = '.simpleSlide-slide img';
} else {
    var loaded_materials = '.simpleSlide-slide';
}

$(loaded_materials).live('load', function() {
         /* Image processing and loading code */
});