使用JavaScript延迟图像加载

Delay image loading with JavaScript

本文关键字：加载 图像 延迟 JavaScript 使用      更新时间：2024-04-10

我目前需要从服务器加载123543个图像，但每个图像都必须经过PHP脚本才能生成，问题是我的服务器非常弱，加载大约600个图像后就会崩溃，所以我要求一个每秒加载2个图像的Javascript，如果可能的话。非常感谢。

您可以使用http://www.appelsiini.net/projects/lazyload

$(function() {          
    $("img.lazy").lazyload({
        event : "sporty"
    });
});
$(window).bind("load", function() { 
    var timeout = setTimeout(function() { $("img.lazy").trigger("sporty") }, 5000);
});

假设您想将所有图像放置在id为"container"的容器中，则此代码可以完成以下操作：

var images = [
    'image1.jpg',
    'image2.jpg'
],
container = document.getElementById('container');
function loadNextImage(index) {
    var index = index || 0,
        imageUrl = images[index],
        image = document.createElement('img');
    image.src = imageUrl;
    container.appendChild(image);
    if (index + 1  < images.length) {
        setTimeout(function(){loadNextImage(index + 1)}, 500);
    }
}
loadNextImage();
相关文章：