1.在云相册页面存在多张图片,一次性加载会出现页面中图片短暂白屏的问题,为了解决这个问题,使用懒加载来处理;
核心思路:使用html5中的 data-image 属性将图片的链接先绑定在元素身上,当检测到当前页的可视区域即将滚动到该元素时,将data-image注入到background-image上,在屏幕的scroll和resize事件上将该函数绑定;
核心代码如下:
//按照需求加载 var fn = function(){ $("#imagesBoxId .image_div_css").each(function(){ //遍历所有图片 var othis = $(this),//当前图片对象 var top = othis.offset().top - $(window).scrollTop(); //计算图片top-滚动条top if (top > $(window).height()) { //如果两者之差小于屏幕高度 return; //不管 } else { othis.css('background-image', othis.attr('data-image')); //可见的时候把占位值替换 并删除占位属性 }; }); }; fn(); $(window).scroll(fn).resize(fn); //绑定事件
2.除了懒加载,还有预加载的思想,比如在做手机端的那种向下滑动的页面,当检测到滑动到第一屏的底端时,再去提前加载第二屏的内容,这里可以理解为是预加载;比如在hover某些图片的时候,如果没有提前加载好,会出现闪烁的问题;这些情况都需要使用预加载;
//存放图片路径的数组 var imgSrcArr = [ 'imgsrc1', 'imgsrc2', 'imgsrc3', 'imgsrc4' ]; var imgWrap = []; function preloadImg(arr) { for(var i =0; i< arr.length ;i++) { imgWrap[i] = new Image(); imgWrap[i].src = arr[i]; } } preloadImg(imgSrcArr);
3.基于上述加载的思想,改造一种分阶段自动加载的方法,这里存在大量的图片需要加载,一次性加载的话体验非常的不好;如果按照光标下载滑动的距离来加载的话,当用户向下滑动的速度非常快时,加载速度完全跟不上光标(电视端)的移动速度,就会出现卡死的问题;为了解决这个问题,我们每次加在6张图片,轮询检测第6N张图片的加载是否完成,如果加载完成,开始下一组的加载;知道全部图片加载完毕;
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>懒加载的实现</title>
<style>
img{
width:50px;
height:50px;
margin:1px;
}
</style>
</head>
<body id="div2">
<script>
//一个数组中有36张图片,怎样先加载6张,等到这6张加载完毕后,在自动去加载后边六张,自己控制加载,加载完毕后,再
// 自动去加载另外六张图片,二而不用等到scrollTop值到了之后再去加载相应的值。使用队列的思想;
//还有不是使用先建立很多的background-image,或者img的方法,在果果云相册中,是在jsp中的中循环插入了很多的div来实现的;
// 这个思想完全可以放在首页改版的页面中查看效果
//怎样判断图片加载完毕?通过监听img的onload事件是否已经完成,或者通过判断img对象(DOM)的complete属性是否为true;
var imgSrcArr =[
'https://cdn-d4-p1.vas.lutongnet.com/larko-epg-h5/resources/hd/com/home_bg.jpg',
//实际测试在这里Ctrl+D,复制大量的图片,或者循环插入多张图片
];
//这里存储好创建的img标签,后边遍历这里的img将其appendChild到body中即可;
var imgWrap = [];
/**
* @date: 2018-06-01
* @Desc: 创建img标签,给img标签加src属性和id值
*/
function preloadImg(arr,callback){
for(var i =0; i<arr.length ;i++){
imgWrap[i] = new Image();
imgWrap[i].src = arr[i]; //在这里直接生成img标签对象,后边直接插入就行
imgWrap[i].id="img"+i;
if(i===arr.length-1){
callback(0);
}
}
}
/**
* @date: 2018-06-01
* @Desc:通过轮询的方式,当上一组的img加载完毕后,自动去加载下一组的img,一组包括6个img标签;
*/
function insertImg(sixthimg){
for(var m=sixthimg;m<sixthimg+6;m++){
document.getElementById("div2").appendChild(imgWrap[m]);
}
//开启轮询函数,
var img=document.getElementById("img"+(sixthimg+5));
var timer = setInterval(function(){
if(img.complete) {
if(sixthimg>=200){
clearInterval(timer);
return;
}else{
clearInterval(timer);
insertImg(sixthimg+6);
console.log("又加载6个了"+sixthimg);
}
}
},60);
}
//调用函数
preloadImg(imgSrcArr,insertImg);
</script>
</body>
</html>
3.懒加载和预加载的区别?
一个是内容后置,一个是内容前置;