原生JavaScript实现懒加载
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生JavaScript实现懒加载相关的知识，希望对你有一定的参考价值。
源码工程下载地址：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>
以上是关于原生JavaScript实现懒加载的主要内容，如果未能解决你的问题，请参考以下文章