JavaScript — предварительная загрузка изображения для всех изображений
Я пытаюсь добавить предварительную загрузку изображения для всех изображений с помощью 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);
Теперь я хочу отобразить «spinner-image», пока изображения загружены.
Каждая попытка с window.load или же jQuery load не работает для меня
Может кто-нибудь объяснить мне, что я должен делать?
Спасибо за вашу помощь!
// редактировать //
Если я использую дополнительный div в html это работает отлично.
Решение
вы можете предварительно загрузить изображения с помощью 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];
}
}
Другие решения
Других решений пока нет …