首页 >> js开发 >> JavaScriptjs 图片懒加载的实现
JavaScriptjs 图片懒加载的实现
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
1.使用场景1.使用场景
当网页上有大量图片需要加载时,如果一次性将图片全部加载完,网页加载时间会过长;
网页本身已经反应很慢了,如果你的页面上又需要引用图片,这时候同样是雪上加霜。2.图片懒加载原理2.图片懒加载原理
图片懒加载,只不过是叫法比较高大上而已,其实现方式很简单,就是在需要的时候再给图片的src属性赋值,仅此而已。3.代码实现3.代码实现
/**
* 图片懒加载
*/
function ImgLazyLoad() {
/**
* 滚动到图片所在位置再加载
* @param imgId
*
懒加载图片的ID
* @param imgSrc
*
懒加载图片的地址
* @param distance
*
图片的可视距离(这个参数可以不传)
*/
this.scrollLoad = function(imgId,imgSrc,distance) {
// 获取该图片的src
var img_source = $('#' + imgId).attr('src');
// 只执行一次
if("" == img_source) {
// 不滚动的情况下,网页的可见高度
var documentClientHeight = document.documentElement.clientHeight || window.innerHeight;
// 获取该图片距离网页顶部的距离
var imgOffsetTop = $('#' + imgId)[0].offsetTop;
// 获取网页的可见高度
// var bodyClientHeight = document.body.clientHeight;
// 1.网页高度<小于网页可视区域的高度(imgOffsetTop < documentClientHeight),就不会发生滚动事件
if (imgOffsetTop < documentClientHeight) {
$('#' + imgId)[0].src = imgSrc;
return;
}
// 获取屏幕高度
//var screenHeight = window.screen.height;
// 图片距离网页左上角的纵向偏移距离(距离网页顶部的距离)
var max_imgClientTop = $('#' + imgId)[0].getBoundingClientRect().top;
// ie下带有小数,所以只取整数
max_imgClientTop = parseInt(max_imgClientTop);
// 图片可视距离(还差多少可以被看见)
var max_imgClientDistance = max_imgClientTop - documentClientHeight;
//0<= distance <=max_imgClientDistance
// 1.参数不存在时,设值=0;(图片刚从可视区域最底部出现时,距离达到最小)distance→→Min=0
// 2.参数>网页可见高度时,设值=可视区域高度;(不滚动时,距离达到最大)distance→→Max=max_imgClientDistance,scrollTop=0
distance = ((distance || 0)>max_imgClientDistance)?max_imgClientDistance:distance;
// 2.最大距离时,无滚动
if (distance == max_imgClientDistance) {
$('#' + imgId)[0].src = imgSrc;
return;
}
// 页面绑定滚动事件
$(document).scroll(function(){
// 获取网页被卷高度
// var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// 距离网页最顶部的距离
var imgClientTop = $('#' + imgId)[0].getBoundingClientRect().top;
// 图片的可视高度
var clientHeight = documentClientHeight - imgClientTop;
// 到达指定距离差或者图片已经进入视野范围
if (-clientHeight <= distance || documentClientHeight >= imgClientTop) {
$('#' + imgId)[0].src = imgSrc;
}
});
}
};
/**
* 通过单击别的元素时再加载
* @param clickId
*
被绑定单击事件的页面元素ID
* @param imgId
*
* @param imgSrc
*
懒加载图片的地址
*/
//
this.clickLoad = function(clickId,imgId,imgSrc) {
// 获取该图片的src
var img_source = $('#' + imgId).attr('src');
// 只执行一次
if("" == img_source) {
// 绑定单击事件
$('#' + clickId).click(function(){
$('#' + imgId)[0].src = imgSrc;
});
}
};
};
/**
* 图片懒加载
*/
function ImgLazyLoad() {
/**
* 滚动到图片所在位置再加载
* @param imgId
*
懒加载图片的ID
* @param imgSrc
*
懒加载图片的地址
* @param distance
*
图片的可视距离(这个参数可以不传)
*/
this.scrollLoad = function(imgId,imgSrc,distance) {
// 获取该图片的src
var img_source = $('#' + imgId).attr('src');
// 只执行一次
if("" == img_source) {
// 不滚动的情况下,网页的可见高度
var documentClientHeight = document.documentElement.clientHeight || window.innerHeight;
// 获取该图片距离网页顶部的距离
var imgOffsetTop = $('#' + imgId)[0].offsetTop;
// 获取网页的可见高度
// var bodyClientHeight = document.body.clientHeight;
// 1.网页高度<小于网页可视区域的高度(imgOffsetTop < documentClientHeight),就不会发生滚动事件
if (imgOffsetTop < documentClientHeight) {
$('#' + imgId)[0].src = imgSrc;
return;
}
// 获取屏幕高度
//var screenHeight = window.screen.height;
// 图片距离网页左上角的纵向偏移距离(距离网页顶部的距离)
var max_imgClientTop = $('#' + imgId)[0].getBoundingClientRect().top;
// ie下带有小数,所以只取整数
max_imgClientTop = parseInt(max_imgClientTop);
// 图片可视距离(还差多少可以被看见)
var max_imgClientDistance = max_imgClientTop - documentClientHeight;
//0<= distance <=max_imgClientDistance
// 1.参数不存在时,设值=0;(图片刚从可视区域最底部出现时,距离达到最小)distance→→Min=0
// 2.参数>网页可见高度时,设值=可视区域高度;(不滚动时,距离达到最大)distance→→Max=max_imgClientDistance,scrollTop=0
distance = ((distance || 0)>max_imgClientDistance)?max_imgClientDistance:distance;
// 2.最大距离时,无滚动
if (distance == max_imgClientDistance) {
$('#' + imgId)[0].src = imgSrc;
return;
}
// 页面绑定滚动事件
$(document).scroll(function(){
// 获取网页被卷高度
// var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// 距离网页最顶部的距离
var imgClientTop = $('#' + imgId)[0].getBoundingClientRect().top;
// 图片的可视高度
var clientHeight = documentClientHeight - imgClientTop;
// 到达指定距离差或者图片已经进入视野范围
if (-clientHeight <= distance || documentClientHeight >= imgClientTop) {
$('#' + imgId)[0].src = imgSrc;
}
});
}
};
/**
* 通过单击别的元素时再加载
* @param clickId
*
被绑定单击事件的页面元素ID
* @param imgId
*
* @param imgSrc
*
懒加载图片的地址
*/
//
this.clickLoad = function(clickId,imgId,imgSrc) {
// 获取该图片的src
var img_source = $('#' + imgId).attr('src');
// 只执行一次
if("" == img_source) {
// 绑定单击事件
$('#' + clickId).click(function(){
$('#' + imgId)[0].src = imgSrc;
});
}
};
};
调用:
$(function() {
// 实例化对象
var ill = new ImgLazyLoad();
// 调用
ill.scrollLoad('aa','http://files.cnblogs.com/files/Marydon20210307/ws_products.bmp',404);
});
$(function() {
// 实例化对象
var ill = new ImgLazyLoad();
// 调用
ill.scrollLoad('aa','http://files.cnblogs.com/files/Marydon20210307/ws_products.bmp',404);
});4.涉及知识点4.涉及知识点
网上也有很多实现方法,但是不能自定义设置加载图片的时机,为了实现这一点,花了不少功夫才搞好。
代码很短,但是涉及的知识点很多。
// 获取的是网页的可视区域的高度(不滚动的情况下)
document.documentElement.clientHeight || window.innerHeight
// 获取的是网页的可见高度(除去隐藏元素的高度)
document.body.clientHeight
// 获取的是显示屏的高度
window.screen.height
// 获取网页的被卷高度(ie下不支持前者获取方式)
document.body.scrollTop || document.documentElement.scrollTop
// 获取指定元素距离网页顶部的距离(静态死值)
document.getElementById('#id').offsetTop
document.getElementById('#id').getBoundingClientRect().top
// 获取的是网页的可视区域的高度(不滚动的情况下)
document.documentElement.clientHeight || window.innerHeight
// 获取的是网页的可见高度(除去隐藏元素的高度)
document.body.clientHeight
// 获取的是显示屏的高度
window.screen.height
// 获取网页的被卷高度(ie下不支持前者获取方式)
document.body.scrollTop || document.documentElement.scrollTop
// 获取指定元素距离网页顶部的距离(静态死值)
document.getElementById('#id').offsetTop
document.getElementById('#id').getBoundingClientRect().top以上就是js 图片懒加载的实现的详细内容,关于js 图片懒加载的资料请关注其它相关文章!
当网页上有大量图片需要加载时,如果一次性将图片全部加载完,网页加载时间会过长;
网页本身已经反应很慢了,如果你的页面上又需要引用图片,这时候同样是雪上加霜。2.图片懒加载原理2.图片懒加载原理
图片懒加载,只不过是叫法比较高大上而已,其实现方式很简单,就是在需要的时候再给图片的src属性赋值,仅此而已。3.代码实现3.代码实现
/**
* 图片懒加载
*/
function ImgLazyLoad() {
/**
* 滚动到图片所在位置再加载
* @param imgId
*
懒加载图片的ID
* @param imgSrc
*
懒加载图片的地址
* @param distance
*
图片的可视距离(这个参数可以不传)
*/
this.scrollLoad = function(imgId,imgSrc,distance) {
// 获取该图片的src
var img_source = $('#' + imgId).attr('src');
// 只执行一次
if("" == img_source) {
// 不滚动的情况下,网页的可见高度
var documentClientHeight = document.documentElement.clientHeight || window.innerHeight;
// 获取该图片距离网页顶部的距离
var imgOffsetTop = $('#' + imgId)[0].offsetTop;
// 获取网页的可见高度
// var bodyClientHeight = document.body.clientHeight;
// 1.网页高度<小于网页可视区域的高度(imgOffsetTop < documentClientHeight),就不会发生滚动事件
if (imgOffsetTop < documentClientHeight) {
$('#' + imgId)[0].src = imgSrc;
return;
}
// 获取屏幕高度
//var screenHeight = window.screen.height;
// 图片距离网页左上角的纵向偏移距离(距离网页顶部的距离)
var max_imgClientTop = $('#' + imgId)[0].getBoundingClientRect().top;
// ie下带有小数,所以只取整数
max_imgClientTop = parseInt(max_imgClientTop);
// 图片可视距离(还差多少可以被看见)
var max_imgClientDistance = max_imgClientTop - documentClientHeight;
//0<= distance <=max_imgClientDistance
// 1.参数不存在时,设值=0;(图片刚从可视区域最底部出现时,距离达到最小)distance→→Min=0
// 2.参数>网页可见高度时,设值=可视区域高度;(不滚动时,距离达到最大)distance→→Max=max_imgClientDistance,scrollTop=0
distance = ((distance || 0)>max_imgClientDistance)?max_imgClientDistance:distance;
// 2.最大距离时,无滚动
if (distance == max_imgClientDistance) {
$('#' + imgId)[0].src = imgSrc;
return;
}
// 页面绑定滚动事件
$(document).scroll(function(){
// 获取网页被卷高度
// var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// 距离网页最顶部的距离
var imgClientTop = $('#' + imgId)[0].getBoundingClientRect().top;
// 图片的可视高度
var clientHeight = documentClientHeight - imgClientTop;
// 到达指定距离差或者图片已经进入视野范围
if (-clientHeight <= distance || documentClientHeight >= imgClientTop) {
$('#' + imgId)[0].src = imgSrc;
}
});
}
};
/**
* 通过单击别的元素时再加载
* @param clickId
*
被绑定单击事件的页面元素ID
* @param imgId
*
* @param imgSrc
*
懒加载图片的地址
*/
//
this.clickLoad = function(clickId,imgId,imgSrc) {
// 获取该图片的src
var img_source = $('#' + imgId).attr('src');
// 只执行一次
if("" == img_source) {
// 绑定单击事件
$('#' + clickId).click(function(){
$('#' + imgId)[0].src = imgSrc;
});
}
};
};
/**
* 图片懒加载
*/
function ImgLazyLoad() {
/**
* 滚动到图片所在位置再加载
* @param imgId
*
懒加载图片的ID
* @param imgSrc
*
懒加载图片的地址
* @param distance
*
图片的可视距离(这个参数可以不传)
*/
this.scrollLoad = function(imgId,imgSrc,distance) {
// 获取该图片的src
var img_source = $('#' + imgId).attr('src');
// 只执行一次
if("" == img_source) {
// 不滚动的情况下,网页的可见高度
var documentClientHeight = document.documentElement.clientHeight || window.innerHeight;
// 获取该图片距离网页顶部的距离
var imgOffsetTop = $('#' + imgId)[0].offsetTop;
// 获取网页的可见高度
// var bodyClientHeight = document.body.clientHeight;
// 1.网页高度<小于网页可视区域的高度(imgOffsetTop < documentClientHeight),就不会发生滚动事件
if (imgOffsetTop < documentClientHeight) {
$('#' + imgId)[0].src = imgSrc;
return;
}
// 获取屏幕高度
//var screenHeight = window.screen.height;
// 图片距离网页左上角的纵向偏移距离(距离网页顶部的距离)
var max_imgClientTop = $('#' + imgId)[0].getBoundingClientRect().top;
// ie下带有小数,所以只取整数
max_imgClientTop = parseInt(max_imgClientTop);
// 图片可视距离(还差多少可以被看见)
var max_imgClientDistance = max_imgClientTop - documentClientHeight;
//0<= distance <=max_imgClientDistance
// 1.参数不存在时,设值=0;(图片刚从可视区域最底部出现时,距离达到最小)distance→→Min=0
// 2.参数>网页可见高度时,设值=可视区域高度;(不滚动时,距离达到最大)distance→→Max=max_imgClientDistance,scrollTop=0
distance = ((distance || 0)>max_imgClientDistance)?max_imgClientDistance:distance;
// 2.最大距离时,无滚动
if (distance == max_imgClientDistance) {
$('#' + imgId)[0].src = imgSrc;
return;
}
// 页面绑定滚动事件
$(document).scroll(function(){
// 获取网页被卷高度
// var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// 距离网页最顶部的距离
var imgClientTop = $('#' + imgId)[0].getBoundingClientRect().top;
// 图片的可视高度
var clientHeight = documentClientHeight - imgClientTop;
// 到达指定距离差或者图片已经进入视野范围
if (-clientHeight <= distance || documentClientHeight >= imgClientTop) {
$('#' + imgId)[0].src = imgSrc;
}
});
}
};
/**
* 通过单击别的元素时再加载
* @param clickId
*
被绑定单击事件的页面元素ID
* @param imgId
*
* @param imgSrc
*
懒加载图片的地址
*/
//
this.clickLoad = function(clickId,imgId,imgSrc) {
// 获取该图片的src
var img_source = $('#' + imgId).attr('src');
// 只执行一次
if("" == img_source) {
// 绑定单击事件
$('#' + clickId).click(function(){
$('#' + imgId)[0].src = imgSrc;
});
}
};
};
调用:
$(function() {
// 实例化对象
var ill = new ImgLazyLoad();
// 调用
ill.scrollLoad('aa','http://files.cnblogs.com/files/Marydon20210307/ws_products.bmp',404);
});
$(function() {
// 实例化对象
var ill = new ImgLazyLoad();
// 调用
ill.scrollLoad('aa','http://files.cnblogs.com/files/Marydon20210307/ws_products.bmp',404);
});4.涉及知识点4.涉及知识点
网上也有很多实现方法,但是不能自定义设置加载图片的时机,为了实现这一点,花了不少功夫才搞好。
代码很短,但是涉及的知识点很多。
// 获取的是网页的可视区域的高度(不滚动的情况下)
document.documentElement.clientHeight || window.innerHeight
// 获取的是网页的可见高度(除去隐藏元素的高度)
document.body.clientHeight
// 获取的是显示屏的高度
window.screen.height
// 获取网页的被卷高度(ie下不支持前者获取方式)
document.body.scrollTop || document.documentElement.scrollTop
// 获取指定元素距离网页顶部的距离(静态死值)
document.getElementById('#id').offsetTop
document.getElementById('#id').getBoundingClientRect().top
// 获取的是网页的可视区域的高度(不滚动的情况下)
document.documentElement.clientHeight || window.innerHeight
// 获取的是网页的可见高度(除去隐藏元素的高度)
document.body.clientHeight
// 获取的是显示屏的高度
window.screen.height
// 获取网页的被卷高度(ie下不支持前者获取方式)
document.body.scrollTop || document.documentElement.scrollTop
// 获取指定元素距离网页顶部的距离(静态死值)
document.getElementById('#id').offsetTop
document.getElementById('#id').getBoundingClientRect().top以上就是js 图片懒加载的实现的详细内容,关于js 图片懒加载的资料请关注其它相关文章!