等待 2 秒,加载图像 2 等待 2 秒,加载图像 3 等待 2 秒,等等......
我正在遵循本教程
https://www.resrc.it/demos/lazyload
这是我正在使用的代码
<script src="https://use.resrc.it/0.9"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://rawgit.com/resrcit/ReVIEW/master/jquery.review-1.0.0.min.js"></script>
<script>
$(document).ready(function () {
resrc.ready(function () {
$('.resrc').review({
callback : function () {
resrc.run(this);
}
});
});
});
以上用于延迟加载图像,称为使用:
<img data-src="http://app.resrc.it/o=95/http://www.your-site.co/image.jpg" alt="An awesome dog" class="resrc"/>
在我的示例中,我有 10 张图像,我希望在加载下一张图像之前经过 2 秒钟。我不确定在哪里放置jQuery的setTimeout函数。当我放置它时,它延迟了 2 秒,而不是加载所有图像而没有任何延迟。我希望它加载图像 1
这更像是一种普通的 JS 解决方法,而不是您的方案的实际解决方案,但是,对于 10 个图像案例,如果您想更改其显示设置,延迟加载可能会限制您,所以也许您仍然会考虑这一点。
如果您愿意,也可以将timedImg();
初始化放在 jQuery $(document).ready();
中。
function timedImg() {
var image1 = document.getElementById("img1"),
image2 = document.getElementById("img2"),
image3 = document.getElementById("img3"),
image4 = document.getElementById("img4"),
image5 = document.getElementById("img5"),
image6 = document.getElementById("img6"),
image7 = document.getElementById("img7"),
image8 = document.getElementById("img8"),
image9 = document.getElementById("img9"),
image10 = document.getElementById("img10");
setTimeout(function() {
image1.style.visibility = "visible"
}, 0);
setTimeout(function() {
image2.style.visibility = "visible"
}, 2000);
setTimeout(function() {
image3.style.visibility = "visible"
}, 4000);
setTimeout(function() {
image4.style.visibility = "visible"
}, 6000);
setTimeout(function() {
image5.style.visibility = "visible"
}, 8000);
setTimeout(function() {
image6.style.visibility = "visible"
}, 10000);
setTimeout(function() {
image7.style.visibility = "visible"
}, 12000);
setTimeout(function() {
image8.style.visibility = "visible"
}, 14000);
setTimeout(function() {
image9.style.visibility = "visible"
}, 16000);
setTimeout(function() {
image10.style.visibility = "visible"
}, 18000);
}
timedImg();
img {
visibility: hidden;
}
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img1" />
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img2" />
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img3" />
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img4" />
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img5" />
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img6" />
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img7" />
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img8" />
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img9" />
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img10" />