全国物流网站百度搜索最多的关键词
最近复习下js、简单实现一下图片的懒加载
思路其实很简单：
页面的img默认加载一张lodaing图片、速度会快一点、其他图片当显示在当前窗口的时候再获取data-src属性的值设置
到图片的src属性当中加载图片。
Demo：http://www.bright2017.top/test1/test1-32/
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>图片懒加载</title><style type="text/css">.demo {text-align: center;}img {width: 130px;height: 140px;}</style></head><body><div class="demo"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/1.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/2.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"><img src="img/loding.gif" alt="图片丢失" data-src="img/3.jpg"></div><script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script><script type="text/javascript">$(function() {$(window).scroll(function() {handscroll();});function handscroll() {let imgs = $("img[data-src]");let bodyScrollHeight = document.body.scrollTop || document.documentElement.scrollTop;let windowHeight = window.innerHeight;for (let k = 0; k < imgs.length; k++) {let imgHeight = $(imgs[k]).offset().top;let imgData = $(imgs).eq(k).attr("data-src");if (imgHeight < (bodyScrollHeight + windowHeight) && imgHeight >= bodyScrollHeight) {setTimeout(function() {$(imgs).eq(k).attr("src", imgData);}, 1000);}}}// 页面默认加载图片handscroll();});</script></body>
</html>
您的支持是对我最大的鼓励。
