这篇“怎么用JS实现图片懒加载”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么用JS实现图片懒加载”文章吧。
当打开一个有很多图片的页面时，先只加载页面上看到的图片，等滚动到页面下面时，再加载所需的图片。这就是图片懒加载。
减少或延迟请求数，缓解浏览器的压力，增强用户体验。
1.设置图片src属性为同一张图片，同时自定义一个data-src属性来存储图片的真实地址
2. 页面初始化显示的时候或者浏览器发生滚动的时候判断图片是否在视野中
3､.当图片在视野中时，通过js自动改变该区域的图片的src属性为真实地址
1.html部分
计算
安全
数据库
网络和加速
企业服务
<div class="container"> <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="1" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg">
.
.
. <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="20" data-src="http://cdn.jirengu.com/book.jirengu.com/img/20.jpg">
</div><style>.container { max-width: 800px; margin: 0 auto;
} .container:after{ content: ''; display: block; clear: both;
} .container img { float: left; width: 50%;
} h1{ clear: both;
}
/*注：img都是浮动，如果不清除浮动，h1的值高度就相当于container里面最高的，不是实际的数值*/</style>V2.js 部分
<script>
start() // 一开始没有滚动，也需要触发一次
$(window).on('scroll', function(){// 滚动时，显示对应图片
start()
}) function start(){
$('.container img').not('[data-isLoaded]').each(function(){ var $node = $(this) if( isShow($node) ){
loadImg($node)
}
})
} function isShow($node){ // 判断图片是否在视野中
return $node.offset().top <= $(window).height() + $(window).scrollTop()
} function loadImg($img){
$img.attr('src', $img.attr('data-src'))
$img.attr('data-isLoaded', 1) // 区别图片是否被加载过，防止重新加载
}以上就是关于“怎么用JS实现图片懒加载”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
