惰性加载lazy load无法实现

[oocute]

首先载入这两个框架

接下来写img，src内写的是gif图，data-original内写的是真实图片

本来想在js文件里写，不过这个被控制器控制，所以写在controller里面。

[oocute]

自己解决啦

[快乐起航2020]

每一行设置断点 调试下呗 aler(1);、、、aler(2);、、aler(3); 说不定引入的脚本都没有作用

[斯洛文尼亚旅游]

JF

[蚂蚁上树]

[#麻辣小龙虾#]

给你一段，自己写的！拿去用。记得把把图的src的url绑定在data-src自定义中

<script type="text/javascript" data-src="lazyload">

	!function(){
		function getAbsPoint(e)
		{
			var x = e.offsetLeft;
			var y = e.offsetTop;
			while(e = e.offsetParent)
			{
				x += e.offsetLeft;
				y += e.offsetTop;
			}
			return {'x': x, 'y': y};
		};
		
		var imgs = document.getElementsByTagName("img");
		var num = imgs.length;
		var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
		lazyload(); //页面载入完毕加载可是区域内的图片
		window.onscroll = lazyload;
		function lazyload() { //监听页面滚动事件
			//console.log("aaa");
			var seeHeight = document.documentElement.clientHeight; //可见区域高度
			//console.log(seeHeight);
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
			//console.log(scrollTop);
			for (var i = n; i < num; i++) {
				if (getAbsPoint(imgs[i]).y < seeHeight + scrollTop) {
					if (imgs[i].getAttribute("src") == "") {
						imgs[i].src = imgs[i].getAttribute("data-src");
					}
					n = i + 1;
				}
			}
		}
	}();

</script>