jQuery的预加载图像动态

Question

奇怪，为什么这是不工作...

功能：

$.fn.preload = function() { 
     this.each(function(){ 
      $('<img/>')[0].src = this; 
     }); 
    } 

代码：

<?php $preimages = glob('images/backgrounds/*{.jpg, .png, .gif, jpeg}', GLOB_BRACE); ?> 

     $([ 
      <?php 
       $imgcount = sizeof($preimages); 
       for($i = 0; $i < $imgcount; $i++) { 
        if($i == $imgcount-1) 
         echo $preimages[$i]; 
        else 
         echo $preimages[$i] . ', '; 
       } 

      ?> 
      ]).preload($("#load").fadeOut()); 

我试图预加载所有图像在图像foler /的背景文件夹...但后来我想要回调为$（“＃加载”）。fadeout（）...

然而，它的工作原理wh我这样做如下：

img1 = new Image(); 
     img2 = new Image(); 
     img3 = new Image(); 

     img1loaded = false; 
     img2loaded = false; 
     img3loaded = false; 

     img1.onload = function() { 
      img1loaded = true; 
      if(img1loaded && img2loaded && img3loaded) { 
       $("#load").fadeOut(); 
      } 
     }; 

     img2.onload = function() { 
      img2loaded = true; 
      if(img1loaded && img2loaded && img3loaded) { 
       $("#load").fadeOut(); 
      } 
     }; 

     img3.onload = function() { 
      img3loaded = true; 
      if(img1loaded && img2loaded && img3loaded) { 
       $("#load").fadeOut(); 
      } 
     }; 

     img1.src = '<?php echo $baseUrl; ?>images/backgrounds/img1.jpg'; 
     img2.src = '<?php echo $baseUrl; ?>images/backgrounds/img2.jpg'; 
     img3.src = '<?php echo $baseUrl; ?>images/backgrounds/img3.jpg'; 

我怎么能做到我上面做的，但动态？

谢谢！

Answer 1

下面是一个图像预载我以前用过...

function onImagesLoaded($container, callback) { 
    var $images = $container.find("img"); 
    var imgCount = $images.length; 
    if (!imgCount) { 
     callback(); 
    } else { 
     $("img", $container).each(function() { 
      $(this).one("load error", function() { 
       imgCount--; 
       if (imgCount == 0) { 
        callback(); 
       } 
      }); 
      if (this.complete) $(this).load(); 
     }); 
    } 
} 

调用它通过传递一个父元素（如一个jQuery对象，而不是DOM元素），和一个回调函数，当所有的图像加载...

onImagesLoaded($("div.image-container"), imagesLoaded); 

，将调用imagesLoaded()当div.image-container所有的图像加载。

它可以扩展以处理错误，但出于我的目的，我只是将错误视为图像完整，否则如果任何图像出于任何原因出错，它将不运行回调函数。