【懒加载】IMG延迟加载的实现原理

网页前端开发图片|前端开发和javascript|idea可以做前端开发吗?

1 原生JavaScript的实现方法
javascript 代码

<script>
var imgs=document.getElementsByTagName(‘img’);
// 获取视口高度与滚动条的偏移量
functionlazyload(){
var scrollTop= window.pageYOffset || document.documentElement.scrollTop|| document.body.scrollTop;
var viewportSize= window.innerHeight || document.documentElement.clientHeight|| document.body.clientHeight;
for (vari=0;i<imgs.length;i++) {
var x=scrollTop+viewportSize-imgs[i].offsetTop;
if (x>0) {
imgs[i].src=imgs[i].getAttribute(‘loadpic’);
}
}
}
setInterval(lazyload,1000);
</script>

2 jquery的实现方法
javascript 代码

/**
* 图片的src实现原理
*/
$(document).ready(function () {
// 获取页面视口高度
varviewportHeight=$(window).height();
varlazyload=function(){
// 获取窗口滚动条距离
varscrollTop=$(window).scrollTop();
$(‘img’).each(function(){
// 判断 视口高度+滚动条距离 与 图片元素距离文档原点的高度
varx=scrollTop+viewportHeight-$(this).position().top;
// 如果大于0 即该元素能被浏览者看到,则将暂存于自定义属性loadpic的值赋值给真正的src
if (x>0) {
$(this).attr(‘src’,$(this).attr(‘loadpic’));
}
})
}
// 创建定时器 “实时”计算每个元素的src是否应该被赋值
setInterval(lazyload,100);
});
html5做前端开发|前端开发mac还是win?|mac 前端开发环境配置
» 本文来自:前端开发者 » 《【懒加载】IMG延迟加载的实现原理》
» 本文链接地址:https://www.rokub.com/3762.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!