画像の遅延読み込みチュートリアルの JS 実装-jsチュートリアル-php.cn

画像の遅延読み込み、

アイデア: マウスが対応する画像の高さまでスライドすると、画像が読み込まれます

#div{ width: 575px; height: auto; overflow: hidden; border: red 1px solid; margin: 0 auto; /*给该div设置定位*/ position: relative; } #div img{ width: 267px; height: 396px; margin-left: 10px; border: 1px solid #000; } function getPos(obj){ var l = 0; var t = 0; while(obj){ l += obj.offsetLeft; t += obj.offsetTop; obj = obj.offsetParent; } return {left:l ,top : t} } window.onload = window.onscroll = function(){ //获取到img var aImg = document.getElementsByTagName("img"); //获取到它的scrollTop 值 考虑兼容问题 var oScrollTop = document.documentElement.scrollTop || document.body.scrollTop; // clientHeight = 上下padding + height var clientH = document.documentElement.clientHeight; //循环遍历每一项通过调用获取到每一个i 项对象的top 值 for (var i = 0;i = aImgTop) { // 进行图片的加载 aImg[i].src = aImg[i].getAttribute("_src"); } } }

ウォーターフォール フローに似たレイアウトがある場合によく使用される読み込みモード

れぇぇぇぇぇぇ