我建立了一個主要使用CSS幻燈片的網站。問題是，在我的手機上，由于網路連接不良，圖片沒有完成加載，而下一張圖片開始加載，這對用戶體驗很不利。是否有可能通過JS檢測客戶端是否完成了圖片的加載？
uj5u.com熱心網友回復：
你可以使用load事件和接近懶惰加載的東西來實作這一點
<img src="mypicture.jpg" onl oad="pictureLoadCallback(this)" >
<img data-src="mypicture2. jpg" onload="pictureLoadCallback(this)">。
[...]
<script>。
var pictureLoadCallback = function（el） {
var next = el.nextElementSibling;
if(next.tagName == "IMG") {
next.src = next.getAttribute（'data-src'）。
}
}
</script>
或者使用javascript事件監聽器 :
<img src="mypicture.jpg" class="imgLoad">
<img data-src="mypicture2. jpg" class="imgLoad">。
[...]
<script>。
var pictureLoadCallback = function（e） {
var next = e.currentTarget.nextElementSibling。
if(next.tagName == "IMG") {
next.src = next.getAttribute（'data-src'）。
}
}
document.querySelector(' 。 imgLoad'）.forEach（function（img）{
img.addEventListener('load'/span>, pictureLoadCallback)。
});
</script>>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/320420.html
標籤：