通过对window绑定scroll事件，获取被隐藏在可视区域上方的像素数，再计算img纵向偏移量。当被隐藏在可视区域上方的像素数大于img纵向偏移量+可视区高度时替换img的src。下面学步园小编来讲解下移动端lazyload怎么去优化？
移动端lazyload怎么去优化
可视区的计算
很多时候业务需要让页面初始化的时候就定位到页面某个位置，前面那样简单的判断会对页头至定位目标位置之间img浪费加载。可以通过getBoundingClientRect()方法获取img相对于视口的位置，从而判断是否需要加载目标图片。
vareLvW,elvH,
varinViewTreshhold=10;
//...
//inViewTreshhold值可以根据页面是否加载完动态改变大小，当页面加载完的时候增大，也可说页面负担小的时候预加载多一些
eLvW=window.innerWidth+inViewTreshhold;
elvH=window.innerHeight+inViewTre·shhold;
eLnegativeTreshhold=inViewTreshhold*-1;
rect=lazyloadElems[globalLazyIndex].getBoundingClientRect();
//判断是否在可视区域
if((eLbottom=rect.bottom)>=eLnegativeTreshhold&&
(eLtop=rect.top)<=elvH&& (eLright=rect.right)>=eLnegativeTreshhold&&
(eLleft=rect.left)<=eLvW&& (eLbottom||eLright||eLleft||eLtop)){ //执行加载图片动作 //... } 事件节流 scroll、touchmove、resize事件会触发大量的计算，在低版本Andorid版本浏览器中卡顿甚至崩溃，我们可以简单做一些事件节流的操作。 vareLnow=Date.now(); varlazyEvalLazy=(function(){ vartimer,running; varunblock=function(){ running=false; }; varrun=function(){ clearTimeout(timer); //执行加载图片动作 //... setTimeout(unblock); }; return{ debounce:function(){ clearTimeout(timer); running=true; timer=setTimeout(run,66); }, throttled:function(){ vardelay; if(!running){ running=true; clearTimeout(timer); delay=Date.now()-eLnow; if(delay>300){
delay=9;
}else{
delay=99;
}
timer=setTimeout(run,delay);
}
}
};
})();
lazyEvalLazy.debounce用来优化resize事件。lazyEvalLazy.throttled用来优化scroll、touchmove等事件，避免频繁触发。
响应式图片
一般响应式图片解决方案：
img{
max-width:100%;
height:auto;
}
现在
目前浏览器对
移动端lazyload怎么去优化
用例如window.HTMLPictureElement这样的方法来判断浏览器是是否支持
if(!window.HTMLPictureElement){
console.log("nopicture")
//shivpictureelement
document.createElement('picture');
//loadrespimagepolyfill
document.write('
}
如果全部以iphone为基准做高清图，那么90%以上的手机对服务器端的请求至少多出40%，对服务器和带宽都是巨量的消耗。在无wifi情况下，看的最多的就是菊花转和进度条，根本不能愉快的购物。也许可以这样做：
现在iphone6、iphone6plus也有了一定的份额，屏幕越来越大，高清图加载越来越吃力。也许可以对这些设备做一些优化：
先加载一个很小的图片，然后等待高清图像load完毕再替换一下src，这样就有了一个图像模糊到高清的过程，相比空白区域的等待也许会好一些。
事件的监听与触发
通常异步获取数据插入到页面的时候需要再次执行例如$(element).lazyload()这样的方法，这样不利于不了解这个组件的人使用。
我们可以检测window.MutationObserver事件或对document.documentElement绑定DOMAttrModified事件触发lazyload行为。
varelement=document.body||document.documentElement;
//lazySizesConfig.mutation为配置选项
if(lazySizesConfig.mutation){
if(window.MutationObserver){
newMutationObserver(lazyEvalLazy.throttled).observe(document.documentElement,{
childList:true,
subtree:true,
attributes:true
});
}else{
element.addEventListener("DOMNodeInserted",lazyEvalLazy.throttled,true);
document.documentElement.addEventListener("DOMAttrModified",lazyEvalLazy.throttled,true);
}
}
其它事件监听
//:hover
if(lazySizesConfig.hover){
document.addEventListener('mouseover',lazyEvalLazy.throttled,true);
}
//:focus/active
document.addEventListener('focus',lazyEvalLazy.throttled,true);
//:target
window.addEventListener('hashchange',lazyEvalLazy.throttled,true);
//:fullscreen
if(('onmozfullscreenchange'inelement)){
window.addEventListener('mozfullscreenchange',lazyEvalLazy.throttled,true);
}elseif(('onwebkitfullscreenchange'inelement)){
window.addEventListener('webkitfullscreenchange',lazyEvalLazy.throttled,true);
}else{
window.addEventListener('fullscreenchange',lazyEvalLazy.throttled,true);
}
if(lazySizesConfig.cssanimation){
document.addEventListener('animationstart',lazyEvalLazy.throttled,true);
document.addEventListener('transitionstart',lazyEvalLazy.throttled,true);
}
以上就是关于“移动端lazyload怎么去优化”的内容，希望对大家有用。更多资讯请关注学步园。学步园，您学习IT技术的优质平台!