懒加载

var img = Array.from(document.getElementsByTagName('img'))
//获取window 的高度
var windowHeight = window.innerHeight
document.onscroll = function(){
img.forEach(element => {
var offset = element.getBoundingClientRect();
if (offset.top < windowHeight) {
var src = element.getAttribute('data-src'); // data-src
element.src = src;
}
});
}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 首先是在img结构中加入“data-xxx”如下: JavaScript部分: var num = d...
    醉死方休丶阅读 241评论 0 0
  • 1.如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible...
    Rising_suns阅读 314评论 0 0
  • 1.原理 当页面图片比较多的时候,加载速度会比较慢,所以为了增加页面加载速度,先将可视区域内的图片加载,其他区域的...
    一二三kkxx阅读 215评论 0 0
  • 预加载是指在网页全部加载之前,对一些主要内容进行加载,以提供给用户更好的体验,减少等待的时间。 懒加载是一种独特而...
    平平淡淡淡阅读 585评论 0 0
  • 夜微凉,晚风吹拂着少年轻薄的衣衫,耳畔传来蝉声几许,少年似在想着些什么,愣愣的...
    M咕嘟猫宁M阅读 399评论 0 1