js實(shí)現(xiàn)網(wǎng)頁(yè)圖片延時(shí)加載 提升網(wǎng)頁(yè)打開(kāi)速度
提升網(wǎng)頁(yè)加載速度的方法有很多種,用 jquery.lazyload.js 實(shí)現(xiàn)圖片異步延遲加載,對(duì)于頁(yè)面包含圖片較多的網(wǎng)站來(lái)說(shuō),會(huì)是個(gè)不錯(cuò)的提升網(wǎng)頁(yè)打開(kāi)速度的方法。代碼君網(wǎng)站欄目頁(yè)列表左側(cè),在PC端預(yù)覽時(shí)能看到一個(gè)文章略縮圖展示模塊,一定程度上會(huì)延長(zhǎng)網(wǎng)頁(yè)加載時(shí)間。本文采用圖片異步延遲加載的方法,來(lái)提升本站頁(yè)面加載速度。
圖片異步加載,就是不必一次性把頁(yè)面的所有圖片都加載顯示出來(lái),等用戶滑動(dòng)滾動(dòng)條到某個(gè)位置時(shí)才會(huì)加載顯示相應(yīng)位置的圖片,這樣能很好地提升網(wǎng)頁(yè)加載速度,進(jìn)一步提升用戶體驗(yàn)。
有很多技術(shù)性文章的配圖是非常多的,如果打開(kāi)網(wǎng)頁(yè)時(shí)要求能夠一次性加載完成所有圖片的話,用戶等候的時(shí)間肯定就得非常長(zhǎng)了。這種做法會(huì)讓用戶體驗(yàn)非常不好,況且也沒(méi)有必要一次性把頁(yè)面上的所有圖片都加載出來(lái)。圖片異步延遲加載,才是網(wǎng)頁(yè)設(shè)計(jì)中最合理最恰當(dāng)?shù)淖龇ā?/p>
我們用 jquery.lazyload.js 來(lái)實(shí)現(xiàn)圖片異步延遲加載,記得要先載入 jQuery 才行。
1、導(dǎo)入 JS 插件:
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.lazyload.js"></script>
2、在頁(yè)面中插入 JavaScript 代碼:
$(document).ready(function($){ $("img").lazyload({ placeholder:"grey.gif", //加載圖片前的占位圖片 effect:"fadeIn" //加載圖片使用的效果(淡入) }); });
通過(guò)以上兩步,就能簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁(yè)圖片異步延時(shí)加載了。
再為大家具體介紹一下:
有時(shí)我們看到一些大型網(wǎng)站,頁(yè)面如果有很多圖片的時(shí)候,當(dāng)你滾動(dòng)到相應(yīng)的行時(shí),當(dāng)前行的圖片才即時(shí)加載的,這樣子的話頁(yè)面在打開(kāi)只加可視區(qū)域的圖片,而其它隱藏的圖片則不加載,一定程序上加快了頁(yè)面加載的速度,對(duì)于比較長(zhǎng)的頁(yè)面來(lái)說(shuō),這個(gè)方案是比較好的。
推薦:使用jquery圖片延遲加載插件jquery.lazyload實(shí)現(xiàn)圖片延遲
實(shí)現(xiàn)原理:
把所有需要延時(shí)加載的圖片改成如下的格式:
<img lazy_src="圖片路徑" border="0"/>
然后在頁(yè)面加載時(shí),把所有使用了lazy_src的圖片都保存到數(shù)組里,然后在滾動(dòng)時(shí)計(jì)算可視區(qū)域的top,然后把延時(shí)加載的圖片中top小于當(dāng)前可視區(qū)域(即圖片出現(xiàn)在可視區(qū)域內(nèi))的圖片的src的值用lazy_src的來(lái)替換(加載圖片):
JS代碼:
lazyLoad = (function() { var map_element = {}; var element_obj = []; var download_count = 0; var last_offset = -1; var doc_body; var doc_element; var lazy_load_tag; function initVar(tags) { doc_body = document.body; doc_element = document.compatMode == 'BackCompat' ? doc_body : document.documentElement; lazy_load_tag = tags || ["img", "iframe"]; }; function initElementMap() { var all_element = []; //從所有相關(guān)元素中找出需要延時(shí)加載的元素 for (var i = 0, len = lazy_load_tag.length; i < len; i++) { var el = document.getElementsByTagName(lazy_load_tag[i]); for (var j = 0, len2 = el.length; j < len2; j++) { if (typeof (el[j]) == "object" && el[j].getAttribute("lazy_src")) { element_obj.push(all_element[key]); } } } for (var i = 0, len = element_obj.length; i < len; i++) { var o_img = element_obj[i]; var t_index = getAbsoluteTop(o_img); //得到圖片相對(duì)document的距上距離 if (map_element[t_index]) { map_element[t_index].push(i); } else { //按距上距離保存一個(gè)隊(duì)列 var t_array = []; t_array[0] = i; map_element[t_index] = t_array; download_count++; //需要延時(shí)加載的圖片數(shù)量 } } }; function initDownloadListen() { if (!download_count) return; var offset = (window.MessageEvent && !document.getBoxObjectFor) ? doc_body.scrollTop : doc_element.scrollTop; //可視化區(qū)域的offtset=document的高+ var visio_offset = offset + doc_element.clientHeight; if (last_offset == visio_offset) { setTimeout(initDownloadListen, 200); return; } last_offset = visio_offset; var visio_height = doc_element.clientHeight; var img_show_height = visio_height + offset; for (var key in map_element) { if (img_show_height > key) { var t_o = map_element[key]; var img_vl = t_o.length; for (var l = 0; l < img_vl; l++) { element_obj[t_o[l]].src = element_obj[t_o[l]].getAttribute("lazy_src"); } delete map_element[key]; download_count--; } } setTimeout(initDownloadListen, 200); }; function getAbsoluteTop(element) { if (arguments.length != 1 || element == null) { return null; } var offsetTop = element.offsetTop; while (element = element.offsetParent) { offsetTop += element.offsetTop; } return offsetTop; } function init(tags) { initVar(tags); initElementMap(); initDownloadListen(); }; return { init: init } })();
使用方法:把頁(yè)面上需要延時(shí)加載的圖片src改成為lazy_src,然后把上面的js放到body最后面,然后調(diào)用:lazyLoad.init();
調(diào)戲的方法可以使用firebug來(lái)查看一時(shí)圖片是否是延時(shí)加載。
另外:
如果你的頁(yè)面上存在有內(nèi)容切換的欄目的話,可能在切換時(shí)切換的內(nèi)容里的圖片可能會(huì)不顯示,處理的方法是在內(nèi)容時(shí)單獨(dú)圖片加載處理,如:
///切換內(nèi)容的代碼… chlid.find("img[init_src]").each(function(){ $(this).attr("src",$(this).attr("init_src")); $(this).removeAttr("init_src"); });
所謂圖片異步加載,意思是不用一次把圖片全部加載完,你可以叫它延遲加載,緩沖加載都行。
看看你有沒(méi)有這種需求:某篇文章圖片很多,如果在載入文章時(shí)就載入所有圖片,無(wú)疑會(huì)延緩載入速度,讓用戶等更久,所以,我想找這樣一種插件,讓網(wǎng)頁(yè)只加載瀏覽器視野范圍內(nèi)的圖片,沒(méi)出現(xiàn)在范圍內(nèi)的圖片就暫不加載,等用戶滑動(dòng)滾動(dòng)條時(shí)再逐步加載,lazyload就是用來(lái)實(shí)現(xiàn)這種效果。
lazyload.js其實(shí)是jQuery的一個(gè)插件,全稱是jquery.lazyload.js,看它的名字就知道它的作用了——就是偷懶載入的意思。由于它是javascript寫的,所以適用于所有網(wǎng)頁(yè),包括Wordpress。
想要使用lazyload,得先載入jQuery,它是依靠jQuery來(lái)實(shí)現(xiàn)效果的。
以上就是本文的全部?jī)?nèi)容,希望大家對(duì)js實(shí)現(xiàn)網(wǎng)頁(yè)圖片延時(shí)加載有了更深入的學(xué)習(xí)了解。
- 網(wǎng)頁(yè)圖片延時(shí)加載的js代碼
- JavaScript延時(shí)效果比較不錯(cuò)的
- JS圖片根據(jù)鼠標(biāo)滾動(dòng)延時(shí)加載的實(shí)例代碼
- JS延時(shí)提示框?qū)崿F(xiàn)方法詳解
- 原生javaScript實(shí)現(xiàn)圖片延時(shí)加載的方法
- javascript實(shí)現(xiàn)延時(shí)顯示提示框特效代碼
- jQuery 鼠標(biāo)經(jīng)過(guò)(hover)事件的延時(shí)處理示例
- jQuery hover 延時(shí)器實(shí)現(xiàn)代碼
- Jquery實(shí)現(xiàn)圖片預(yù)加載與延時(shí)加載的方法
- jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)事件的延時(shí)處理效果
- jQuery實(shí)現(xiàn)帶延時(shí)功能的水平多級(jí)菜單效果【附demo源碼下載】
- JS/jQuery實(shí)現(xiàn)DIV延時(shí)幾秒后消失或顯示的方法
相關(guān)文章
JavaScript中防抖和節(jié)流的原理和區(qū)別詳解
JavaScript 中,防抖和節(jié)流是一種用于優(yōu)化事件處理函數(shù)調(diào)用頻率的技術(shù),防抖和節(jié)流的目的都是為了避免頻繁地觸發(fā)事件處理函數(shù),從而減少瀏覽器和服務(wù)器的負(fù)擔(dān),本文將給大家介紹一下JavaScript中防抖和節(jié)流的原理和區(qū)別,需要的朋友可以參考下2023-09-09JavaScript定義數(shù)組的三種方法(new Array(),new Array(''x'',''y'')
下面小編就為大家?guī)?lái)一篇JavaScript定義數(shù)組的三種方法(new Array(),new Array('x','y')。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10Javascript 兼容firefox的一些問(wèn)題
上午在做一些測(cè)試.把頁(yè)面拿到火狐上去就出現(xiàn)一堆問(wèn)題.頁(yè)面布局先不說(shuō).Javascript代碼的問(wèn)題就夠頭疼2009-05-05基于Bootstrap實(shí)現(xiàn)的下拉菜單手機(jī)端不能選擇菜單項(xiàng)的原因附解決辦法
小編使用bootstrap做的下拉菜單在電腦瀏覽器中可以正常使用,在手機(jī)瀏覽器中能彈出下拉列表卻不能選擇列表中的菜單項(xiàng),怎么回事,如何解決呢?下面小編給大家分享下具體原因及解決辦法,一起看下吧2016-07-07javascript實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘的啟動(dòng)和停止
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘的啟動(dòng)和停止文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10JS實(shí)現(xiàn)文檔加載完成后執(zhí)行代碼
本文給大家講述的是使用javascript實(shí)現(xiàn)文檔加載完成后再執(zhí)行代碼的方法和示例,非常簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下。2015-07-07javascript 面向?qū)ο蠹夹g(shù)基礎(chǔ)教程
看了很多介紹javascript面向?qū)ο蠹夹g(shù)的文章,很暈.為什么?不是因?yàn)閷懙貌缓?而是因?yàn)樘願(yuàn)W.2009-12-12