标签：asc 情况 通过 time view reset splay scroll style
源码工程下载地址：https://github.com/blff122620/jsLibary/lazyLoad.html
实现原理就是通过scroll事件判断元素是否已经进入viewport
导入
lazyLoad.js
使用
inViewPort(item)即可 判断item是否在视口里，然后继续进行自己的逻辑就行了
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>图片懒加载</title> <link rel="stylesheet" href="./static/css/reset.css"> <link rel="stylesheet" href="./static/css/global.css"> <style> .content { /*height: 1500px;*/ width: 100%; overflow: hidden; } .content>img { border-radius: 5px; display: inline-block; margin: 200px 0 0 200px; width: 235px; } </style> </head> <body> <div class="content bg1" id="js-imgdiv"> <img src="./static/img/lazyDefault.jpg" data-url="./static/img/1.jpg" alt="" > <img src="./static/img/lazyDefault.jpg" data-url="./static/img/2.jpg" alt="" > <img src="./static/img/lazyDefault.jpg" data-url="./static/img/3.jpg" alt="" > <img src="./static/img/lazyDefault.jpg" data-url="./static/img/4.jpg" alt="" > <img src="./static/img/lazyDefault.jpg" data-url="./static/img/5.jpg" alt="" > <img src="./static/img/lazyDefault.jpg" data-url="./static/img/6.jpg" alt="" > </div> <script type="text/javascript" src="./static/js/util.js"></script> <script type="text/javascript" src="./static/js/lazyLoad.js"></script> <script> (function() { window.onload=function(){ var pics = $$("#js-imgdiv>img"); setPicSrc(pics); window.onscroll = function(){ setPicSrc(pics); }; function setPicSrc(pics){ pics.forEach(function(item){ if(inViewPort(item)){ setTimeout(function(){ item.src = item.dataset.url; },200);//模拟一下网速慢的情况 }; }); } }; }()); </script> </body> </html>
标签：asc 情况 通过 time view reset splay scroll style
原文地址：http://www.cnblogs.com/beau30/p/6958786.html
