国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

關(guān)于圖片延遲加載或者懶加載的說(shuō)法

MasonEast / 452人閱讀 

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

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

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

$("#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("默認(rèn)圖片加載出錯(cuò)了"+index)
            }
        })(i)
    };

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

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

相關(guān)文章

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

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

    shuibo 評(píng)論0 收藏0

  • 設(shè)計(jì)無(wú)限滾動(dòng)下拉加載，實(shí)踐高性能頁(yè)面真諦

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

    Hanks10100 評(píng)論0 收藏0

  • 設(shè)計(jì)無(wú)限滾動(dòng)下拉加載，實(shí)踐高性能頁(yè)面真諦

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

    novo 評(píng)論0 收藏0

  • 圖像延遲加載 && 列表圖順序加載

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

    ghnor 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<