懶載入，預載入實現以及對比

阿新 • • 發佈：2019-01-11

一、懶載入

1.概念：

訪問頁面時，先把img元素的背景圖片src替換成一張佔位圖，這樣只需請求一次，當圖片出現在瀏覽器的可視區域內時，再設定圖片的真實路徑，顯示圖片。

2.優點：

頁面長圖片多時，在首次載入時一次性載入會耗費時間長，使用懶載入可以使頁面載入速度快、減輕伺服器的壓力、節約流量。

3.步驟：

頁面中的img元素，若沒有src屬性，瀏覽器就不會發出請求去下載圖片，只有通過Javascript設定了圖片路徑，瀏覽器才會傳送請求。

1）懶載入先在頁面中把需要延遲載入的圖片統一使用一張佔位圖進行佔位，把真正的路徑存在元素“data-url”屬性裡。

2）頁面載入完成後，通過scrollTop判斷圖片是否在使用者的視野，如果在，則將 data-url的值取出來存放到src中。

3）在滾輪事件中重複判斷圖片是否進入視中，如果在，則將data-url的值取出來存放到src中。

4.DEMO

<style type="text/css">
    img{
        display: block;
    }
</style>
<body>
    <img src="" alt="">
    <img src="" alt="">
    <img src="" alt="">
    <img src="" alt="">
    <img src="" alt="" 
>
</body>
<script type="text/javascript">
    var pic=document.getElementsByTagName('img');
    arr=['img1.jpg','img2.jpg','img3.jpg','img4.jpg','img5.jpg'];
    for(var i=0;i<arr.length;i++){
        pic[i].setAttribute('src-data', arr[i]);
    }
    for(var i=0;i<4;i++){
        pic[i].setAttribute('src' 
, pic[i].getAttribute('src-data'));
    }
    document.onmousewheel=function(){
                     if(document.body.clientHeight+document.body.scrollTop>=pic[3].offsetTop+pic[3].offsetHeight){
            pic[4].setAttribute('src',pic[4].getAttribute('src-data'));
        }
    }

</script>

5. 外掛

二、預載入

1.概念：

提前載入圖片，當用戶需要檢視時可直接從本地快取中渲染。

2.優點：

圖片預先載入到瀏覽器中，這對圖片佔據很大比例的網站來說十分有利，它保證了圖片快速、無縫地釋出，也可幫助使用者在瀏覽網站內容時操作得到最快的反映。

3.實現方式

實現預載的方法非常多，比如：用CSS和JavaScript實現預載入；僅使用JavaScript實現預載入；使用Ajax實現預載入。

4.js預載入demo:

常用方法new Image()，設定其src來實現預載，再使用onload方法回撥預載完成事件。只要瀏覽器把圖片下載到本地，同樣的src就會使用快取。當Image下載完圖片頭後，會得到寬和高，因此可以在預載前得到圖片的大小。

//要預載入的圖片路徑
    var limg = ["image/bg1.png","image/bg2.png","image/bg3.png","image/bg4.png"];
    var ind = 0;
    for(var j = 0 ; j<limg.length; j++){
        var img = new Image();
        img.src = limg[j];
        img.onload = function(){
            ind++;
            //載入完成
            if(ind==limg.length){ 
                //write your code...
            }
        }
    }

三、預載入與懶載入對比

1.概念：

懶載入也叫延遲載入：JS圖片延遲載入,延遲載入圖片或符合某些條件時才載入某些圖片。
預載入：提前載入圖片，當用戶需要檢視時可直接從本地快取中渲染。

2.區別：
兩種技術的本質：兩者的行為是相反的，一個是提前載入，一個是遲緩載入甚至不載入。懶載入對伺服器前端有一定的緩解壓力作用，預載入則會增加伺服器前端壓力。

本篇完

懶載入，預載入實現以及對比

一、懶載入 1.概念：訪問頁面時，先把img元素的背景圖片src替換成一張佔位圖，這樣只需請求一次，當圖片出現在瀏覽器的可視區域內時，再設定圖片的真實路徑，顯示圖片。 2.優點：頁面長圖片多時，在首次載入時一次性載入會耗費時間長，使用懶載入可以使頁面

懶載入和預載入的基本原理和實現方法

懶載入的原因：對於圖片過多的場景，為了提高頁面的載入速度，降低伺服器的負載，增強使用者體驗，我們對還沒出現在視野的圖片先不載入，當元素出現在我們視野中的時候再載入。懶載入的原理：我們先將img標籤中的src連結設定為一樣的圖片（空白圖片），將真正的圖片連結放在自定義屬性中，如（da

EF 懶載入（延遲載入），預載入

定義一對多關係實體時，使用virtual和ICollection定義，實現eazyLoading 解析參考連結： https://docs.microsoft.com/zh-cn/ef/ef6/querying/related-data https://www.cnbl

Android系列Viewpager+Fragment 優化之懶載入（預載入）的實現

今天帶來的就是fragment的優化，怎麼去實現懶載入懶載入（預載入）懶載入字面意思就是當需要的時候才會去載入，不需要就不要載入為什麼Fragment需要懶載入呢，一般我們都會在onCreate()或者onCreateView()裡去啟動一些資料載入操作，比如從本

javascript實現圖片懶載入和預載入

所謂懶載入就是通過某些特定的條件，然後再給圖片的src賦值，常見的懶載入方式有點選載入和滾動載入。如果是點選載入，那麼一般是通過點選事件。例如：然後新增點選事件: 效果如下: 如

HTML5全屏，頁面可見性，訪問攝像頭和麥克風，檢測電池，預載入網頁功能

1，全屏 // 找到適合瀏覽器的全屏方法 function launchFullScreen(element) { if(element.requestFullScreen) { element.requestFullScreen(); } else if(e

[譯] React 16.6 懶載入(與預載入)元件

譯: Lazy loading (and preloading) components in React 16.6 React 16.6添加了一個新的特性: React.lazy(), 它可以讓程式碼分割(code splitting)更加容易。接下來通過一個股票App Demo，來學習如何使用Rea

懶載入與預載入的區別詳細

懶載入 1.什麼是懶載入？懶載入也就是延遲載入。當訪問一個頁面的時候，先把img元素或是其他元素的背景圖片路徑替換成一張大小為1*1px圖片的路徑（這樣就只需請求一次，俗稱佔位圖），只有當圖片出現在瀏覽器的可視區域內時，才設定圖片正真的路徑，讓圖片

SpringBoot配置載入，各配置檔案優先順序對比

文章內容： SpringBoot配置檔案的基本使用； yaml配置檔案優先順序問題講解； yaml配置檔案目錄及比較說明；自定義配置屬性; @ConfigurationProperties與@Value兩種註解對比; idea自定義yaml配置提示載

WEB開發者之混合開發APP（七），預載入和自定義事件

混合開發App同h5頁面開發，完全不同之一就是預載入技術。因為不可能所有的頁面開啟時，都需要重新建立，（1）每次重新建立頁面，耗費效能；（2）新建頁面時，如果載入耗時較長，則會出現類似白屏問題，體驗極差。預載入和自定義事件，就可以解

getClass()和getClassLoader()區別以及ClassLoader詳解及用途（檔案載入，類載入）

1.1 幾個相關概念ClassLoader負責載入系統的所有Resources（Class，檔案，來自網路的位元組流等），通過ClassLoader從而將資源載入JVM 每個class都有一個reference，指向自己的ClassLoader。Class.getClassLoader() arra

關於反射，動態載入，靜態載入

.什麼叫做反射：反射是一種機制，基於一個類的.class位元組碼檔案，建立這個類的物件的技術。關於.class檔案：一、java有編譯、執行兩個階段。在編譯的後，被編譯.java檔案可以編譯出一個.class檔案。 class HelloJava{ pub

XListView重新整理載入，網路載入Xlv資料，網路載入ViewPager自動輪播，側拉，TabL

MainActivity.java public class MainActivity extends AppCompatActivity { private ViewPager pager; private DrawerLayout draw

什麼是類的載入，何時載入

當程式主動使用某個類時，如果該類還未被載入到記憶體中，系統會通過載入，連線，初始化三個步驟來對該類進行初始化，JVM將會連續完成這三個步驟，也把這三個步驟統稱為類載入或類初始化。類載入指的是將類Class檔案讀入記憶體，併為之建立一個java.lang.Class物件，也

Swing, RAP(RCP), Android 程式開發中，GUI重新整理實現方式對比

今天我們說一說基於Java語言的幾種GUI程式開發中，GUI重新整理實現方式的對比。 Swing，RAP（RCP也是一樣），Android其介面重新整理的原理都是一樣的：介面重新整理只有一個執行緒，我們稱其為UIThread，所有重新整理介面的操作（如更新進度條上的進度）都必須通過這個執行緒來操作，

Android-Fragment（基本知識，靜態載入，動態載入）

1.回顧上篇瞭解了和學習了 Andorid 的webView 的使用 2.重點（1）Fragment基本知識（2）Fragment 靜態載入（3）Fragment 動態

多圖片上傳預覽實現以及移動端web多檔案上傳

注：先寫下兩個點，等空下來再上程式碼~ 1.多圖片上傳預覽，且可對圖片進行編輯可對 input[type=file] 物件獲取 obj.files 獲取 FileList，但為只讀模式，不可寫。

MyBatis延遲載入，分層載入和區域性延遲載入

延遲載入，玩過hibernate的都知道那玩意叫懶載入。在最新官方MyBatis文件裡，有上面這2個屬性，一個是延遲載入，一個是分層載入。 lazyLoadingEnabled 預設值為false，那麼在有級聯關係的resultMap裡，查詢後會加載出所有的級聯關係，當

Fragment 詳細介紹（由來、靜態載入，動態載入，頁卡滑動切換）

1.什麼是Fragment？ Fragment的由來基於Android系統的裝置越來越多，解析度種類越來越多，Google提出Fragment的概念也是希望通過Fragment解決螢幕碎片化問題。 Fragment的翻譯為碎片，自Android3.0開始引入Fragmen

網頁頁面預載入動畫的實現，載入後隱藏

我們做web app的時候，可以做一個頁面載入廣告，在你網頁載入的時候，先出現一段gif動圖或者是海報。下面是實現頁面載入動畫的程式碼首先js程式碼的實現 (function($){ $(window).load(function(){ $('#b

懶載入，預載入實現以及對比

一、懶載入

二、預載入

三、預載入與懶載入對比

相關推薦