Jquery 延迟加载图像，每个图像的显示时间延迟不同
第一个问题： 是否有一种方法可以在一个页面上延迟加载不同的图像及其相应的URL，每个图像在页面加载后的不同延迟后显示 情景：Jquery 延迟加载图像，每个图像的显示时间延迟不同,jquery,lazy-loading,delay,Jquery,Lazy Loading,Delay,第一个问题： 是否有一种方法可以在一个页面上延迟加载不同的图像及其相应的URL，每个图像在页面加载后的不同延迟后显示 情景： 第一个加载页面（用于良好的SEO和用户体验） 在后台启动图像的延迟加载 在页面和延迟加载后一秒钟显示image-1 在图像-1后一秒钟显示图像-2 在图2后一秒钟显示图3 …继续播放大约50张小图片 我尝试了几个小时，代码如下： <body> <div id="a1"></div> <div id="a2"&g
- 第一个加载页面（用于良好的SEO和用户体验）
- 在后台启动图像的延迟加载
- 在页面和延迟加载后一秒钟显示image-1
- 在图像-1后一秒钟显示图像-2
- 在图2后一秒钟显示图3
- …继续播放大约50张小图片
<body>
<div id="a1"></div>
<div id="a2"></div>
<div id="a3"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script language="javascript">
$(window).load(function(){ // This runs when the window has loaded
var img1 = $("<img />").attr('src', 'https://www.google.nl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png').load(function() {
$("#a1").append(img1); // When the image has loaded, stick it in a div
});
var img2 = $("<img />").attr('src', 'https://www.google.nl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png').delay(1000).load(function() {
$("#a2").append(img2);
});
var img3 = $("<img />").attr('src', 'https://www.google.nl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png').delay(2000).load(function() {
$("#a3").append(img3);
});
});
</script>
$（window）.load（function（）{//此操作在加载窗口后运行
变量img1=$（“”）.attr（'src'，'https://www.google.nl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'）.delay（1000）.load（函数（）{
$（“#a2”）。追加（img2）；
});
变量img3=$（“
//只是一些小猫
常量配置=[
{uri:“https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Katzis1.jpg/320px-Katzis1.jpg，目的地：“#a1”}，
{uri:“https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Six_weeks_old_cat_（aka）_edit.jpg/320px-Six_weeks_cat_（aka）_edit.jpg”，目的地：“#a2”}，
{uri:“https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Cats_Petunia_and_Mimosa_2004.jpg/320px-Cats_Petunia_and_Mimosa_2004.jpg，目的地：“#a3”}，
{uri:“https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/1-month-old_kitten_35.jpg/320px-1-month-old_kitten_35.jpg，目的地：“#a4”}，
{uri:“https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/1-month-old_kitten_44.jpg/320px-1-month-old_kitten_44.jpg，目的地：“#a5”}，
{uri:“https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/A_kitten_playing.JPG/320px-A_kitten_playing.JPG，目的地：#a6}
];
//费希尔·耶茨洗牌
//资料来源：https://stackoverflow.com/a/12646864/402037
常量Shuffarray=（数组）=>{
对于（设i=array.length-1；i>0；i--）{
常数j=数学楼层（数学随机（）*（i+1））；
[array[i]，array[j]=[array[j]，array[i]]；
}
}
//显示（并删除）图像数组的第一个图像
//在1秒后调用自身，直到没有图像
常量showImage=（图像）=>{
如果（images.length==0）返回；
const image=images.shift（）；
document.querySelector（image.destination）.appendChild（image.img）；
setTimeout（函数（）{
showImage（图像）；
}, 1000);
}
//洗牌
//如果需要保留图像的顺序
//洗牌代替
shuffleArray（配置）；
//并将URI转换为承诺
//它们的图像加载后的分辨率
const promises=config.map（image=>{
返回新承诺（函数（解析）{
const img=新图像（）；
img.onload=函数（）{
解析（图像）；
};
image.img=img；
img.src=image.uri；
});
});
//当所有图像都可用时
所有（承诺）
//向他们展示（一次一个）
.然后（显示图像）；img{宽度：100px}#a1
#a2
#a3
#a4
#a5
#a6type=“text/javascript“