您的位置:时时彩走势图 > 时时彩走势图web前端 > 从而判断是否需要加载目标图片

从而判断是否需要加载目标图片

2020-01-09 14:01

以前写过一篇文章:图片延迟加载之jQuery.lazyload,介绍了lazyload的用法和技巧,今天主要探讨在移动端应用的优化。

可视区的计算

通过对window绑定scroll事件,获取被隐藏在可视区域上方的像素数, 再计算img纵向偏移量。当被隐藏在可视区域上方的像素数大于img纵向偏移量+可视区高度时替换img的src。

很多时候业务需要让页面初始化的时候就定位到页面某个位置,前面那样简单的判断会对页头至定位目标位置之间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(>=eLnegativeTreshhold&&<=elvH&&>=eLnegativeTreshhold&&<=eLvW&&(eLbottom||eLright||eLleft||eLtop)){//执行加载图片动作//...}

事件节流

scroll、touchmove、resize事件会触发大量的计算,在低版本Andorid版本浏览器中卡顿甚至崩溃,我们可以简单做一些事件节流的操作。

vareLnow=Date.now();varlazyEvalLazy={vartimer,running;varunblock=function(){running=false;};varrun=function;//执行加载图片动作//...setTimeout;};return{debounce:function;running=true;timer=setTimeout;},throttled:function(){vardelay;if{running=true;clearTimeout;delay=Date.now{delay=9;}else{delay=99;}timer=setTimeout;

lazyEvalLazy.debounce用来优化resize事件。lazyEvalLazy.throttled用来优化scroll、touchmove等事件,避免频繁触发。

响应式图片

一般响应式图片解决方案:

img{max-width:100%;height:auto;}

现在元素好像很有用。假如你的chrome版本是38+,在新标签页打开chrome://flags,勾选’启用实验性网络平台功能enable-experimental-web-platform-features,重启, 查看demo。目前浏览器对元素支持的不太好,可以做一些降级处理。

用例如window.HTMLPictureElement这样的方法来判断浏览器是是否支持,对不支持的元素引入respimage.js,或者直接内置到你lazyload组件里。

if(!window.HTMLPictureElement){console.log("nopicture")//shivpictureelementdocument.createElement;//loadrespimagepolyfilldocument.write('');}

如果全部以iphone为基准做高清图,那么90%以上的手机对服务器端的请求至少多出40%,对服务器和带宽都是巨量的消耗。在无wifi情况下,看的最多的就是菊花转和进度条,根本不能愉快的购物。也许可以这样做:

现在iphone6、iphone6S系列也有了一定的份额,屏幕越来越大,高清图加载越来越吃力。也许可以对这些设备做一些优化:

先加载一个很小的图片,然后等待高清图像load完毕再替换一下src,这样就有了一个图像模糊到高清的过程,相比空白区域的等待也许会好一些。

事件的监听和触发

通常异步获取数据插入到页面的时候需要再次执行例如$这样的方法,这样不利于不了解这个组件的人使用。我们可以检测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);}}

其他事件的监听

//:hoverif(lazySizesConfig.hover){document.addEventListener('mouseover',lazyEvalLazy.throttled,true);}//:focus/activedocument.addEventListener('focus',lazyEvalLazy.throttled,true);//:targetwindow.addEventListener('hashchange',lazyEvalLazy.throttled,true);//:fullscreenif(('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);}

源码参考:

本文由时时彩走势图发布于时时彩走势图web前端,转载请注明出处:从而判断是否需要加载目标图片

关键词: