2013-09-24 124 views
2

奇怪,爲什麼這是不工作...jQuery的預加載圖像動態

功能:

$.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'; 

我怎麼能做到我上面做的,但動態?

謝謝!

回答

2

下面是一個圖像預載我以前用過...

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所有的圖像加載。

它可以擴展以處理錯誤,但出於我的目的,我只是將錯誤視爲圖像完整,否則如果任何圖像出於任何原因出錯,它將不運行回調函數。