首页懒加载实现代码
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 1226px;
height: 460px;
margin: 50px auto;
background: url(./img/TB1BlobNFXXXXXyXXXXXXXXXXXX-34-34.gif) no-repeat center #efefef;
}
div img {
width: 100%;
height: 100%;
/* 默认图片是隐藏的 */
display: none;
}
</style>
</head>
<body>
<div><img src="" trueSrc="./img/banner.jpg" alt="图片"></div>
<script>
/*
懒加载
优点:
1.防止破图,影响用户体验
2.有利于性能优化
*/
/*
首屏懒加载实现
1.真实的图片地址不是直接赋值给图片src,而是定义图片的自定义属性上
*/
// 多长时间后保证图片真够加载成功才去展示图片
// 获取元素
var aImg = document.getElementsByTagName("img")[0];
//设置延迟定时器
setTimeout(function () {
lazyImg(aImg);
}, 100);
/*
懒加载
参数:
curImg 要处理的图片
*/
function lazyImg(curImg) {
// 先创建一张临时图片
var oImg = document.createElement("img");
// 将真实图片地址赋值给临时图片的src
oImg.src = curImg.getAttribute("trueSrc");
// 绑定onload事件 加载成功才会去执行函数 不成功函数不执行
oImg.onload = function () { //临时图片资源是否加载成功
// 能够进来证明图片资源加载成功了
// 将加载成功的图片地址赋值真实图片 将临时图片src的值赋值当前图片src
curImg.src = this.src;
// 将真实图片展示
curImg.style.display = "block";
}
}
</script>
其他页懒加载实现代码
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 1226px;
height: 460px;
margin: 1500px auto;
background: url(./img/TB1BlobNFXXXXXyXXXXXXXXXXXX-34-34.gif) no-repeat center #efefef;
}
div img {
width: 100%;
height: 100%;
/* 默认图片是隐藏的 */
display: none;
}
</style>
</head>
<body>
<div><img src="" trueSrc="./img/banner.jpg" alt="图片"></div>
<script>
/*
懒加载
优点:
1.防止破图,影响用户体验
2.有利于性能优化
*/
/*
其它懒加载的实现
1.真实的图片地址不是直接赋值给图片src,而是定义图片的自定义属性上
2.当前图片用户看到了才去加载
*/
// 获取元素
var aImg = document.getElementsByTagName("img")[0];
// 元素隐藏了不占用页面空间 display:none; 没办法获取到js盒子模型的值,值都是0,一般获取父级
console.log(aImg.parentNode.offsetTop);
// 首屏的高度
var winH = document.documentElement.clientHeight;
// 绑定滚动事件
window.onscroll =function(){
// 获取滚动条滚动的距离
var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
// 判断:首屏高度 + 滚动距离 >= 图片中部到body的距离
if((winH + scrollT) >= (aImg.parentNode.offsetTop + aImg.parentNode.clientHeight /2)){
// 懒加载
lazyImg(aImg);
}
}
/*
懒加载
参数:
curImg:处理的图片
*/
function lazyImg(curImg){
// 先创建临时图片
var oImg = document.createElement("img");
// 将当前图片结构上真实图片地址赋值给临时图片src
oImg.src = curImg.getAttribute("trueSrc");
// 判断临时图片资源是否加载成功
oImg.onload = function(){
// 加载成功图片资源赋值给当前图片
curImg.src = this.src;
// 展示图片
curImg.style.display = "block";
}
}
</script>