实现图片懒加载
作用
- 减少或延迟请求数，缓解浏览器的压力，增强用户体验
- 设置图片src属性默认为内存小的图片，自定义一个data-src属性来存储图片的真实地址
- 页面初始化显示或者浏览器发生滚动时，判断图片是否在视窗中
- 通过DOM操作设置该区域图片的src属性为真实地址
- css+html
.container {
max-width: 800px;
margin: 0 auto;
}
/* 清除浮动 */
.container:after {
content: "";
display: block;
clear: both;
}
.container img {
width: 50%;
height: 260px;
float: left;
}
"container">
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
- (1) 用Jquery实现
>
// 一打开页面，加载视窗中的图片
start();
// 加载函数：遍历图片，加载视窗中未加载的图片
function start() {
$('.container>img').not('[data-isLoaded]').each(function () {
var $img = $(this);
//this指向img，若用箭头函数，this指向window
// 页面逻辑：当元素高度 <= 窗口高度+滚动条高度，意味着到达目标点，即可加载图片
if ($img.offset().top <= $(window).height() + $(window).scrollTop()) {
// 缓冲效果
setTimeout(function () {
$img.attr('src', $img.data('src'));
//把图片真实地址赋值给src属性
// 性能优化：对已加载的图片，设置属性值为1作为标识，在遍历图片时不会再被加载
$img.attr('data-isLoaded', 1);
}, 500)
}
})
} // 浏览器滚动事件
$(window).on('scroll', function () {
start();
})
显示图片函数中的性能优化：设计思想是每次滚动时都要对图片进行遍历，那么标记已加载过的图片，后续进行排除，只对未加载的图片进行操作，便可大大提高性能
- (2) 用JS实现
>
var imgs = document.querySelectorAll('img');
lazyload(imgs);
// 懒加载实现
function lazyload(imgs) {
var h = window.innerHeight;
//可视区域高度
var s = document.documentElement.scrollTop || document.body.scrollTop;
//滚动区域高度
imgs.forEach(val => {
if(val.dataset['isLoaded']!='1'){
if (val.offsetTop <= (h + s)) {
setTimeout(function () {
// 获取自定义属性data-src，用真图片替换假图片
val.src = https://www.it610.com/article/val.dataset['src'];
// val.data-isLoaded = '1';
会报错！！
val.setAttribute("data-isLoaded","1");
}, 500)
}
}
});
}// 滚屏函数
window.onscroll = function () {
lazyload(imgs);
}
法二：利用插件 【实现图片懒加载】参考博客
- 基于jQuery的图片延迟加载插件jQuery.lazyload，使用延迟加载可提高网页下载速度
- 其使用方法：
- 引入jquery.js和jquery.lazyload.js
- 图片的真实地址必须放在data-original属性中，代码如下：
![实现图片懒加载]()
$(function() {
$(".lazy").lazyload({
threshold: 200;
//图片在距离屏幕 200px 时提前加载
event: "click";
//当用户点击图片时才进行加载
effect: "fadeIn";
//图片加载有淡入效果
});
});
