JS-Implementierung des Tutorials zum verzögerten Laden von Bildern-js-Tutorial-php.cn

Lazy Loading von Bildern,

Idee: Wenn die Maus auf die Höhe des entsprechenden Bildes gleitet, wird das Bild geladen;

#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"); } } } Lademodus, der häufig verwendet wird, wenn ein wasserfallartiges Layout vorliegt

var num = document.getElementsByTagName('img').length; var img = document.getElementsByTagName("img"); var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历 lazyload(); //页面载入完毕加载可是区域内的图片 window.onscroll = lazyload; function lazyload() { //监听页面滚动事件 var seeHeight = document.documentElement.clientHeight; //可见区域高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度 for (var i = n; i var n = 0, imgNum = $("img").length, img = $('img'); lazyload(); $(window).scroll(lazyload); function lazyload(event) { for (var i = n; i