預加載所有圖像的圖像

我嘗試使用jQuery load()方法爲所有圖像添加預加載圖像。在我的php文檔中，我閱讀了圖像文件夾並創建了一個img-tag foreach元素。預加載所有圖像的圖像

事情是這樣的：

$myimages = opendir("img/"); 
$gallery = array(); 
while($myimage = readdir($myimages)) 
{ 
if($myimage != '.' AND $myimage != '..') 
{ 
    $gallery[] = $image; 
} 
} 

sort($gallery); 

foreach ($gallery as $image) { 
    echo '<div><img src="img/'.$image.'" id="preload"/></div>'; 
} 

closedir($myimages);

現在我想顯示「微調圖像」直到圖像被加載。每次嘗試window.load或jQuery load都不適合我。

任何人都可以解釋我要做什麼嗎？

感謝您的幫助！

// //編輯

如果我使用一個額外的div在html它工作正常。

來源

2016-04-25 Green Microchip

'IMG {背景圖像：網址（CSS/IMG/spinner.gif）50％不重複; }' –

嗨Roko'img {background：url（css/img/spinner.gif）50％no-repeat;}'不等到圖像完全加載？ –

你試過了嗎？這是一個虛擬的背景佔位符設置爲圖像背景。 –

你可以使用JavaScript preloadImages

function preloadImages(array) { 
if (!preloadImages.list) { 
    preloadImages.list = []; 
} 
var list = preloadImages.list; 
for (var i = 0; i < array.length; i++) { 
    var img = new Image(); 
    img.onload = function() { 
     var index = list.indexOf(this); 
     if (index !== -1) { 
      // remove image from the array once it's loaded 
      // for memory consumption reasons 
      list.splice(index, 1); 
     } 
    }; 
    list.push(img); 
    img.src = array[i]; 
} 

}

來源

2016-04-25 13:24:55

預加載所有圖像的圖像

回答

相關問題