本文摘自PHP中文网,作者coldplay.xixi,侵删。
实现懒加载的方法:首先自定义属性如【data-imgurl】,存放着图片的路径;然后通过js判断界面滚动的位置或图片是否已加载;最后加载再去获取属性【data-imgurl】的值赋给src即可。
实现图片懒加载的方法:
首先自定义属性如【data-imgurl】,存放着图片的路径;然后通过js判断界面滚动的位置或图片是否已加载;最后加载再去获取属性【data-imgurl】的值赋给src即可。
实现图片的加载,具体做法如下:
1 2 3 4 5 6 7 8 9 10 11 12 | $( 'img' ).each( function () {
if (checkShow($(this)) && !isLoaded($(this)) ){ loadImg($(this));
$(window).on( 'scroll' , function () {
$( 'img' ).each( function () {
if (checkShow($(this)) && !isLoaded($(this)) ){
loadImg($(this));
}
})
})
function checkShow( $img ) {};
function isLoaded ( $img ) {};
function loadImg ( $img ) {};
|
1.判断目标标签是否出现在视野中:
1 2 3 4 5 6 7 8 9 | function checkShow( $img ) {
var sTop = $(window).scrollTop();
var wHeight = $(window).height();
var offsetTop = $img .offset().top;
if (offsetTop < (scrollTop + windowHeight) && offsetTop > scrollTop) {
return true;
}
return false;
}
|
2.判断目标标签是否已经被加载过:
1 2 3 | function isLoaded ( $img ) {
return $img .attr( 'data-imgurl' ) === $img .attr( 'src' );
}
|
3.加载目标标签:
1 2 3 | function loadImg ( $img ) {
$img .attr( 'src' , $img .attr( 'data-imgurl' ));
}
|
相关学习推荐:javascript视频教程
以上就是如何实现图片懒加载?的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
js函数中的几种参数形式
jquery easyui收费的么
js如何创建字符串数组
css和js后加问号和数字有什么用
js全称是什么?
浏览器的事件循环
js怎么获取网站的url
javascript如何设置值
js计算两个日期之差天数总是不正确
js中如何利用正则匹配多个全部数据
更多相关阅读请进入《js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 如何实现图片懒加载?