圖片預載入和懶載入（附上一個小demo瀑布流）

polikesen發表於2019-10-08

圖片預載入

圖片預載入就是在頁面真正渲染一張圖片時，先模擬一個圖片（new Image()），讓它去伺服器請求要載入的圖片路徑,請求完成之後把路徑給真正html頁面上的圖片的src路徑；然後再把新建立的圖片清除了（形象點說：那個新建立的圖片相當於一個跑腿小弟，辦完事之後就被殺了，hahhahah~~~）

 let realSrc = ele.getAttribute('realSrc');
 let temp = new Image();
 temp.src = realSrc;
 temp.onload = function () {
    ele.src = realSrc;
 }
 temp = null;
複製程式碼

圖片懶載入

在瀏覽器渲染圖片頁面之前先用一個預設的圖片代替，當那個圖片顯示到頁面某個位置的時候再換成真正的圖片

//圖片露出一半的時候，把圖片地址換成真實地址，顯示真實圖片，其他時候顯示預設圖片
function loadImg(ele) {
        if (ele.flag) return;
        let scT = document.documentElement.scrollTop || document.body.scrollTop; //捲去的高度
        let wH = winH().h; //一螢幕路的高度
        let t = offset(ele).t; //當前元素到body 的偏移量
        let h = ele.clientHeight
        if (scT + wH > t + h / 2) {
            //說明圖片露出一半
            console.log(666)
            ele.flag = true;
            // ele.src = '1.jpg';
            //圖片預載入
            let temp = new Image();
            temp.src ='1.jpg';
            temp.onload = function () {
                //這張圖片載入完成之後會觸發該函式
                ele.src = temp.src;
                fadeIn(ele);//執行圖片漸現效果
                temp = null;
            }
        }
    }
//讓圖片慢慢的顯示出來 ，也就是控制透明度
function fadeIn(ele) {
        //讓圖片的opacity從0到1；
        //you are the shadow to my lift
        ele.style.opacity = 0;
        let n = 0;
        ele.timer = setInterval(() => {
            n += 0.01;
            if (n >= 1) {
                clearInterval(ele.timer);
            }
            ele.style.opacity = n;
        }, 100);
    }
複製程式碼

小demo：瀑布流

思想：

 1、獲取資料  封裝成一個函式，去實現獲取資料的操作
 2、渲染資料  把從後臺獲取到的資料展示頁面上，按照列來展示的，
    迴圈後臺給的陣列， 然後把每一條資料拼接好，新增到長度最小的那一列
    這裡封裝了一個獲取長度最小的列的方法 getMinLi
    把元素集合轉成陣列， 然後按照 clientHeight 進行排序，由此找到最低的哪個li;
 3、滾動載入更多，長度最小的哪個li的底部露出來時，我們就去載入新的資料；
 loadMore方式 一次性請求多次 我們做了一個flag的判斷；只有當flag為false的時候， 
 才去執行新資料的請求,當請求開始的時候
 我們把flag置為true,渲染成功 我們把flag再置為false;    
4、再加上圖片懶載入的操作；loadImg   loadAll
    懶載入  就是當圖片還沒有出現到可視視窗的時候,不去載入圖片，
    只有當圖片露出來的時候  我們再去載入真正的圖片
    預載入  就是 當圖片要展示成真正的圖片時， 先用預設圖展示，
    然後再利用JS建立一個臨時的圖片，讓這張臨時的
    圖片去遠端請求 真正的圖片， 當請求成功之後，
    再把這個真實圖片的地址賦給頁面上的哪個img標籤
5、實現圖片的漸顯  fadeIn 利用定時器 對img進行 opacity的累加操作；
複製程式碼

程式碼實現

github.com/polikesen12…

相關文章