關于圖片延遲加載或者懶加載的說法

MasonEast 發(fā)布于2019-08-21 10:21 / 458人閱讀

var img = new image();
    img.src = "小圖占位.jpg";   //加載載占位的，和html在同一文件夾下，實際也要onlaod加載，本地加載速度快一點
    img.onload = function(){
      document.querySelector("body").appendChild(img);
    }
var img_r = new image();//這個東西可以放到默認圖片加載的onload里
    img_r.src = "大圖真實.jpg"; //下載真實的，遠程服務器請求
    img_r.onload = function(){
        img.src = img_r.src     //下載完后，替換占位
    }

1，第一種方法，小圖占位
2，第二種方法，容器背景圖占位，img下載后放到容器里，遮住容器背景圖

注釋：服務器的圖片在src之后就開始下載了，但是只有當圖片onload(也就是圖片下載完成)后往body里添加才會直接顯示出來。。

$("#main_scroll").empty().html(data);
    var imgs = document.querySelectorAll("img");
    var img_arry = [];
    for(var i = 0 ;i < imgs.length; i++){
        img_arry[i] = imgs[i].src;
        imgs[i].style.height = SW+"px";
        imgs[i].style.width = SW+"px";
        (function(index){
            imgs[index].src = "img/defalut.png";
            imgs[index].onload = function(){
                var temp_img = new Image();
                temp_img.src = img_arry[index];
                var height = (SW/this.naturalWidth>=1?1:SW/this.naturalWidth)*this.naturalHeight;
                var width = (SW/this.naturalWidth>=1?1:SW/this.naturalWidth)*this.naturalWidth;
                imgs[index].src = temp_img.src;
                imgs[index].style.height = height+"px";
                imgs[index].style.width = width+"px";
            }
            imgs[index].onerror = function(){
                console.log("默認圖片加載出錯了"+index)
            }
        })(i)
    };

GPU云服務器云服務器 js實現(xiàn)數(shù)據(jù)的懶加載圖片 js圖片懶加載延遲加載圖片懶加載

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/85365.html

原生實現(xiàn)img-lazyLoad:圖片延遲加載（基于intersection Observer）

摘要：接下來，我們需要利用對這些暫時看不見的圖片元素進行觀察，當確認他們滾動到了窗體的可視區(qū)域時，我們在回調(diào)函數(shù)中對其進行加載。創(chuàng)建一個，配置元素和回調(diào)函數(shù)觸發(fā)機制，這里我們將這個設為。點擊查看視頻教程哦！！！！ intersection Observer簡介點擊查閱MDN關于此api的使用說明這個api是用來檢測dom元素交集的，常見的應用場景之一就是本文提到的對圖片進行懶加載，即：...

shuibo 2019-08-23 15:05 評論0 收藏0
設計無限滾動下拉加載，實踐高性能頁面真諦

摘要：論壇上有過這么一篇熱門文章，它從角度分析了無限滾動加載的設計實踐。無限滾動加載背后的技術挑戰(zhàn)其實比想象中要多不少。整體思路和方案設計我們要實現(xiàn)的頁面樣例如圖，它能夠做到無限下拉加載內(nèi)容。 UX Planet論壇上有過這么一篇熱門文章: Infinite Scrolling Best Practices，它從UX角度分析了無限滾動加載的設計實踐。無限滾動加載在互聯(lián)網(wǎng)上到處都有應用：豆瓣...

Hanks10100 2019-08-20 14:39 評論0 收藏0
設計無限滾動下拉加載，實踐高性能頁面真諦

摘要：論壇上有過這么一篇熱門文章，它從角度分析了無限滾動加載的設計實踐。無限滾動加載背后的技術挑戰(zhàn)其實比想象中要多不少。整體思路和方案設計我們要實現(xiàn)的頁面樣例如圖，它能夠做到無限下拉加載內(nèi)容。 UX Planet論壇上有過這么一篇熱門文章: Infinite Scrolling Best Practices，它從UX角度分析了無限滾動加載的設計實踐。無限滾動加載在互聯(lián)網(wǎng)上到處都有應用：豆瓣...

novo 2019-08-01 16:25 評論0 收藏0
圖像延遲加載 && 列表圖順序加載

摘要：此外，跟蹤尚未延遲加載的元素數(shù)量，以及取消綁定滾動事件處理程序的繁瑣工作將由開發(fā)者來完成。圖像延遲加載列表圖順序加載的組件已經(jīng)開源啦有興趣的同學可以查看使用起來非常簡單圖片延時加載十分重要，尤其是對于移動端用戶。從理論上來看，圖像延遲加載機制十分簡單，但實際上卻有很多需要注意的細節(jié)。此外，有多個不同的用例均受益于延遲加載。首先，我們來了解一下在 HTML 中延遲加載內(nèi)聯(lián)圖像。延遲加載...

ghnor 2019-05-23 17:33 評論0 收藏0