簡介

? ? 為了提升用戶體驗，優化首頁加載速度，我們經常會使用這樣的策略：

• 延遲加載圖片
• 減少網絡請求
• 本地緩存
• 合并壓縮js，css
• 使用CDN加速，等

下邊就簡單介紹一下延遲加載圖片。

延遲加載圖片

            //函數節流/*** 函數節流* @fn {Function} 延遲執行函數* @interval {Number} 延遲多久執行,默認值500毫秒* * */var throttle=function(fn,interval){var _fn=fn || function(){},//保存需要延遲執行函數的引用timer,//定時器firstTime=true;//是否是第一次調用return function(){var args=arguments,that=this;if(firstTime){//如果第一次執行不需要延遲
                        _fn.apply(that,args);return firstTime=false;}if(timer){//如果定時器還在說明上一次執行還沒結束return false;}timer=setTimeout(function(){//延遲一段時間執行
                        clearTimeout(timer);timer=null;_fn.apply(that,args);},interval || 500);}}$(function(){;(function lazymag(){var image_list=$(".image"),win_height=window.innerHeight;/*** 綁定窗口改變大小事件* */window.onresize=throttle(function(){//console.log("resize");
                        lazyimage(image_list,win_height);},200)/*** 綁定滾動事件* */window.onscroll=throttle(function(){//console.log("scroll");
                        lazyimage(image_list,win_height);},200);lazyimage(image_list,win_height);/*** 延遲加載圖片* @imagelist {Arry} jq對象img列表* @win_height {Number} window窗體高度* */function lazyimage(imagelist,win_height){var listlength=imagelist.length;for(var i=0;i<listlength;i++){if(win_height+document.querySelector("body").scrollTop>imagelist.eq(i).offset().top){if(!imagelist.eq(i).attr("src"))imagelist.eq(i).attr("src",imagelist.eq(i).attr("lazysrc"));}}}})();})

原理介紹：

首頁是把所有圖片src去掉，這樣以來就會被加載

其次當頁面滾動到圖片所在位置時，設置src屬性。

或者當窗體改變大小時，觸發設置src屬性

? 獲取window窗體高度，獲取滾動條卷起的高度。他們兩個值相加與當前進入可視范圍內的圖片到瀏覽器左上角的高度對比。

查看demo? 查看demo?

總結

延遲加載圖片用到的地方還是很多的。主要方法就是把所有非首屏的圖片不加載。滾動到圖片位置在加載。

轉載于:https://www.cnblogs.com/xiaoxiaokun/p/7441226.html

總結

以上是生活随笔為你收集整理的延迟加载图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。