为所有图像预加载图像答案

【问题标题】：Preloading image for all images为所有图像预加载图像
【发布时间】：2016-04-25 12:17:34
【问题描述】：

我尝试使用 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 都不适合我。

谁能解释我该怎么做？

感谢您的帮助！

// 编辑 //

如果我在html 中使用额外的div，它可以正常工作。

【问题讨论】：

img{ background-image: url(css/img/spinner.gif) 50% no-repeat; }
嗨 Roko img{background: url(css/img/spinner.gif) 50% no-repeat;} 不等到图像完全加载？
你试过了吗？这是一个设置为图像背景的虚拟背景占位符。
我试过了。图像通过微调器加载。
您将在这里有重复的ids，这是不允许的..

标签： javascript php ajax preloader

【解决方案1】：

您可以使用 javascript 预加载图像

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];
}

}

【讨论】：