js实现图片懒加载

大型购物网站都会采用图片懒加载技术来优化网站首页打开速度,以提高用户体验,那么具体是怎么实现的呢,我们一探究竟。

html结构(div包裹一层用来显示背景图片,等待图片加载完成后,显示真实图片)

<div class="box" id="box">
    <img src="" trueImg="img/timg.jpg" />
</div>

css样式(通常会用一张体积很小的图片来当作背景图,先隐藏图片,显示背景图,等图片加载完成之后,再把它显示出来)

* {
    margin: 0;
    padding: 0;
}

.box {
    width: 200px;
    height: 200px;
    background: #eee url(img/timg.gif) no-repeat center center;
    background-size: 50px 50px;
}

.box img {
    width: 100%;
    height: 100%;
    display: none;
}

js核心代码(主要原理就是在图片元素上增加自定义属性存放真实图片地址,通过new出来的Image对象的onload事件来确定图片已经加载完成,然后再把图片地址赋值给img标签即可)

 1 function lazyLoad() {
 2     var oDiv = document.getElementById("box");
 3     var imgEle = oDiv.firstElementChild;
 4     var imgSrc = imgEle.getAttribute("trueImg");
 5 
 6     var oImg = new Image();
 7     oImg.src = imgSrc;
 8     oImg.onload = function() {
 9         imgEle.src = this.src;
10         imgEle.style.display = "block";
11     }
12     oImg=null;
13 }
14 
15 setTimeout(lazyLoad, 2000);

漫长的国庆假期结束了,明天又要上班了,继续撸代码。

转载于:https://www.cnblogs.com/zt123123/p/7638321.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是原生js实现图片的源码: ```javascript // 获取所有需要图片元素 const lazyImages = document.querySelectorAll("img.lazy"); // 判断图片是否在可视区域内 function isInViewport(image) { const rect = image.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } // 图片 function loadImage(image) { image.src = image.dataset.src; image.classList.remove("lazy"); } // 监听window的滚动事件 window.addEventListener("scroll", function () { // 遍历需要图片元素 for (const image of lazyImages) { if (isInViewport(image)) { loadImage(image); } } }); ``` 首先,我们获取所有需要图片元素: ```javascript const lazyImages = document.querySelectorAll("img.lazy"); ``` 接着,我们定义一个函数`isInViewport`用于判断图片是否在可视区域内。该函数会返回一个布尔值,表示图片是否在可视区域内: ```javascript function isInViewport(image) { const rect = image.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } ``` 然后,我们定义一个函数`loadImage`用于图片。该函数会将图片的`src`属性设置为`data-src`属性的值,并移除`lazy`类: ```javascript function loadImage(image) { image.src = image.dataset.src; image.classList.remove("lazy"); } ``` 最后,我们监听`window`的滚动事件,遍历所有需要图片元素,如果图片在可视区域内,则调用`loadImage`函数图片: ```javascript window.addEventListener("scroll", function () { for (const image of lazyImages) { if (isInViewport(image)) { loadImage(image); } } }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值