网页图片懒加载
1、为了代码的可读性高一点，小编用html5的方式来做测试，样式的代码就不贴出了，毕竟懒加载都是运用到已经开发好的网站页面居多。<!DOCTYPE html><html><head><meta charset="UTF-8"><title>懒加载效果</title></head><body></body></html>
3、最后编写js，编写思路如下几点：(1)浏览器存储图片至加载到的位置，避免每次都从第一张图片开始遍历；烫喇霰嘴(2)当前页面载入完毕加载可是区域内的图片；注：就是固定高度内的图片(3)监听页面滚动事件；注：鼠标的滑动(4)可见区域高度；注：浏览器显示区域页面高度(5)滚动条距离顶部高度<script>var oBtn = document.getElementsByTagName('button')[0];var aImages = document.images;loadImg(aImages);window.onscroll = function(){ loadImg(aImages);};function loadImg(arr){ for( var i = 0,len = arr.length; i < len; i++){ if(arr[i].getBoundingClientRect().top < document.documentElement .clientHeight && !arr[i].isLoad){ arr[i].isLoad = true; arr[i].style.cssText = "transition: ''; opacity: 0;" if(arr[i].dataset){ aftLoadImg(arr[i],arr[i].dataset.original); }else{ aftLoadImg(arr[i],arr[i].getAttribute("data-original"));} (function(i){ setTimeout(function(){ arr[i].style.cssText = "transition: 1s; opacity: 1;" },16) })(i); } }}function aftLoadImg(obj,url){ var oImg = new Image(); oImg.onload = function(){ obj.src = oImg.src; } oImg.src = url;}</script>
