圖片預加載和懶加載(附上一個小demo瀑布流)

圖片預加載

圖片預加載就是在頁面真正渲染一張圖片時,先模擬一個圖片(new Image()),讓它去服務器請求要加載的圖片路徑,請求完成以後把路徑給真正html頁面上的圖片的src路徑;而後再把新建立的圖片清除了(形象點說:那個新建立的圖片至關於一個跑腿小弟,辦完事以後就被殺了,hahhahah~~~)html

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

圖片懶加載

在瀏覽器渲染圖片頁面以前先用一個默認的圖片代替,當那個圖片顯示到頁面某個位置的時候再換成真正的圖片git

//圖片露出一半的時候,把圖片地址換成真實地址,顯示真實圖片,其餘時候顯示默認圖片
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:瀑布流

思想:

一、獲取數據  封裝成一個函數,去實現獲取數據的操做
 二、渲染數據  把從後臺獲取到的數據展現頁面上,按照列來展現的,
    循環後臺給的數組, 而後把每一條數據拼接好,添加到長度最小的那一列
    這裏封裝了一個獲取長度最小的列的方法 getMinLi
    把元素集合轉成數組, 而後按照 clientHeight 進行排序,由此找到最低的哪一個li;
 三、滾動加載更多,長度最小的哪一個li的底部露出來時,咱們就去加載新的數據;
 loadMore方式 一次性請求屢次 咱們作了一個flag的判斷;只有當flag爲false的時候, 
 纔去執行新數據的請求,當請求開始的時候
 咱們把flag置爲true,渲染成功 咱們把flag再置爲false;    
四、再加上圖片懶加載的操做;loadImg   loadAll
    懶加載  就是當圖片尚未出現到可視窗口的時候,不去加載圖片,
    只有當圖片露出來的時候  咱們再去加載真正的圖片
    預加載  就是 當圖片要展現成真正的圖片時, 先用默認圖展現,
    而後再利用JS建立一個臨時的圖片,讓這張臨時的
    圖片去遠程請求 真正的圖片, 當請求成功以後,
    再把這個真實圖片的地址賦給頁面上的哪一個img標籤
五、實現圖片的漸顯  fadeIn 利用定時器 對img進行 opacity的累加操做;
複製代碼

代碼實現

github.com/polikesen12…github

相關文章
相關標籤/搜索