亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

js img圖片加載失敗，重新加載+斷網(wǎng)檢查

April / 3293人閱讀

摘要：我們常常會(huì)遇到加載圖片的時(shí)候因?yàn)榫W(wǎng)絡(luò)問題或者圖片過大導(dǎo)致圖片加載失敗的問題，頁面就因?yàn)檫@張蹦掉的圖變得不美觀。

我們常常會(huì)遇到img加載圖片的時(shí)候因?yàn)榫W(wǎng)絡(luò)問題或者圖片過大導(dǎo)致圖片加載失敗的問題，頁面就因?yàn)檫@張蹦掉的圖變得不美觀。所以我們需要圖片加載失敗的時(shí)候重新加載圖片

//js方法定義  
function resetImgUrl(imgObj,imgSrc,maxErrorNum){  
      if(maxErrorNum > 0){  
            imgObj.onerror=function(){  
              reSetImgUrl(imgObj,imgSrc,maxErrorNum-1);  
            };  
            setTimeout(function(){  
                imgObj.src=imgSrc;  
            },500);  
        }else{  
            imgObj.onerror=null;  
            imgObj.src="<%=basePath%>images/noImg.png";  
        }  
  
    }  
  
//調(diào)用  
 
//該邏輯摘自網(wǎng)絡(luò)http://sunshuaij2ee.iteye.com/blog/1727993

判斷網(wǎng)絡(luò)連接情況,重新連接網(wǎng)絡(luò)時(shí)再請求圖片

var onLine = true
var eventList = {} ;//用于儲(chǔ)存待重新執(zhí)行函數(shù)的事件列表
window.addEventListener("offline",function(){
    onLine = false;
})
window.addEventListener("online",function(){
    if(onLine == false){
       onLine = true; 
       reLine();
    }
})
//重新連接網(wǎng)絡(luò)的時(shí)候重新調(diào)用事件列表對(duì)象里面的函數(shù)
function reLine(){
    for(var key in eventList){
        if(!eventList[key])continue
        var arg = eventList[key].arg;
        var thisOnFn = eventList[key].that;
        eventList[key].fun.apply(thisOnFn,arg);
        eventList[key] = null;
    }
}
//已經(jīng)斷網(wǎng)了，把函數(shù)存儲(chǔ)到一個(gè)對(duì)象里面
function offlined(fun,arg,that){
    if(!onLine){
        //arg = arguments;
        var name = fun.name||"__new";
        eventList[name] = {};
        eventList[name].fun = fun;//原函數(shù)
        eventList[name].that = that;//原上下文對(duì)象
        eventList[name].arg = [].slice.call(arg);//原參數(shù)
        return true
    }
    return false
}

測試一下（把代碼復(fù)制到chrome的console里面運(yùn)行）

function aa(){
    offlined(aa,arguments,this)
    for(var i=0 ; i

結(jié)合上面的圖片重新加載邏輯


function resetImgUrl(imgObj,imgSrc,maxErrorNum){
    if(offlined(reSetImgUrl,arguments,this))return
    if(maxErrorNum > 0){  
        imgObj.onerror=function(){  
            reSetImgUrl(imgObj,imgSrc,maxErrorNum-1);  
        };  
        setTimeout(function(){  
            imgObj.src=imgSrc;  
        },500);  
    }else{  
        imgObj.onerror=null;  
        imgObj.src="<%=basePath%>images/noImg.png"; 
    }  
}


文章首發(fā)地址 https://juejin.im/user/5a30c3736fb9a044ff317351


涉及原創(chuàng)內(nèi)容，轉(zhuǎn)載請附注明出處

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/90807.html

相關(guān)文章

  • 簡單的js圖片壓縮上傳，支持IE10及以上瀏覽器

    摘要：壓縮部分是從網(wǎng)上搞下來的上傳部分是自己寫的，相當(dāng)于在其他人的基礎(chǔ)上完善了這個(gè)壓縮上傳流程。文本框選擇圖片默認(rèn)進(jìn)行上傳，有時(shí)間再改一下按鈕上傳。 壓縮部分是從網(wǎng)上搞下來的,上傳部分是自己寫的，相當(dāng)于在其他人的基礎(chǔ)上完善了這個(gè)壓縮上傳流程。 壓縮部分，壓縮率一般，重在瀏覽器支持方面好些，使用了FileReader和Canvas實(shí)現(xiàn)，F(xiàn)ileReader瀏覽器支持方面還不錯(cuò)：showImg(...

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

  • 原生 js 實(shí)現(xiàn)面對(duì)對(duì)象版瀑布流

    摘要：一一些閑話作為一個(gè)寫靜態(tài)的切圖仔，其實(shí)日常工作中根本用不上瀑布流這種小清新，畢竟?fàn)I銷頁面都是要求搶眼吸睛高大上文案爸爸說啥都對(duì)。昨上午閑著沒事看到別人寫的瀑布流的帖子，覺得很好玩的樣子，然后決定上午就寫一個(gè)試試。。。 一、一些閑話 作為一個(gè)寫靜態(tài)的切圖仔，其實(shí)日常工作中根本用不上瀑布流這種小清新，畢竟?fàn)I銷頁面都是要求 搶眼__、__吸睛__、 __高大上 （文案爸爸說啥都對(duì)）。 昨上...

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

  • [譯]如何構(gòu)建自己的Progressive Image Loader

    摘要：最后，我們必須調(diào)用函數(shù)來檢查所有的漸進(jìn)式圖片容器在首次運(yùn)行時(shí)是否在頁面上可見。我們還必須在滾動(dòng)頁面或調(diào)整瀏覽器大小時(shí)調(diào)用函數(shù)，在一些舊的瀏覽器主要指可以非常迅速地對(duì)這些事件作出回應(yīng)，所以我們需要限制回調(diào)，以確保它不能在毫秒內(nèi)被再一次調(diào)用。 你可以在Facebook和Medium上遇到過漸進(jìn)式圖片，當(dāng)頁面滾動(dòng)到視圖時(shí)，模糊的低分辨率圖像會(huì)被清晰的全分辨率版本替換。 showImg(htt...

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

  • 前端資源加載重試

    摘要：資源加載重試，則是提高用戶體驗(yàn)中重要的一環(huán)。對(duì)加載失敗的進(jìn)行重試。一個(gè)，有時(shí)候會(huì)包括及資源，其中一個(gè)加載失敗便會(huì)發(fā)起重試，直到有一個(gè)資源重試了次就判斷為失敗。通過資源加載重試，可大大減少中加載異步的頁面文件時(shí)，失敗而導(dǎo)致白屏的問題。 介紹 對(duì)于TO C的應(yīng)用，用戶網(wǎng)絡(luò)千差萬別，總有各種網(wǎng)絡(luò)問題導(dǎo)致資源加載失敗，使得訪問時(shí)出現(xiàn)白屏，樣式錯(cuò)亂等。資源加載重試，則是提高用戶體驗(yàn)中重要的一環(huán)。...

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

  • 構(gòu)建離線WEB應(yīng)用

    摘要：使用離線應(yīng)用構(gòu)建應(yīng)用服務(wù)端服務(wù)器配置創(chuàng)建文件客戶端構(gòu)建，并在標(biāo)簽上添加屬性，屬性值是服務(wù)器上配置的緩存資源列表的文件名配置相關(guān)事件，創(chuàng)建離線文件內(nèi)容將狀態(tài)代碼轉(zhuǎn)化成狀態(tài)離線應(yīng)用創(chuàng)建即使沒有互聯(lián)網(wǎng)連接也可以使用的應(yīng)用程序。 HTML5新增了localstroage和application cache做離線緩存，兩種緩存各有應(yīng)用的場景，今天我們說說application cache這種方案...

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

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

0條評(píng)論

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