<tfoot id="aa0uc"></tfoot>

<ul id="aa0uc"></ul>

<fieldset id="aa0uc"></fieldset>

js img圖片加載失敗，重新加載+斷網檢查

April 發布于2019-08-21 18:47 / 3205人閱讀

摘要：我們常常會遇到加載圖片的時候因為網絡問題或者圖片過大導致圖片加載失敗的問題，頁面就因為這張蹦掉的圖變得不美觀。

我們常常會遇到img加載圖片的時候因為網絡問題或者圖片過大導致圖片加載失敗的問題，頁面就因為這張蹦掉的圖變得不美觀。所以我們需要圖片加載失敗的時候重新加載圖片

//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";  
        }  
  
    }  
  
//調用  
 
//該邏輯摘自網絡http://sunshuaij2ee.iteye.com/blog/1727993

判斷網絡連接情況,重新連接網絡時再請求圖片

var onLine = true
var eventList = {} ;//用于儲存待重新執行函數的事件列表
window.addEventListener("offline",function(){
    onLine = false;
})
window.addEventListener("online",function(){
    if(onLine == false){
       onLine = true; 
       reLine();
    }
})
//重新連接網絡的時候重新調用事件列表對象里面的函數
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;
    }
}
//已經斷網了，把函數存儲到一個對象里面
function offlined(fun,arg,that){
    if(!onLine){
        //arg = arguments;
        var name = fun.name||"__new";
        eventList[name] = {};
        eventList[name].fun = fun;//原函數
        eventList[name].that = that;//原上下文對象
        eventList[name].arg = [].slice.call(arg);//原參數
        return true
    }
    return false
}

測試一下（把代碼復制到chrome的console里面運行）

function aa(){
    offlined(aa,arguments,this)
    for(var i=0 ; i
結合上面的圖片重新加載邏輯
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"; 
    }  
}
文章首發地址 https://juejin.im/user/5a30c3736fb9a044ff317351
涉及原創內容，轉載請附注明出處

GPU云服務器云服務器 js 重新加載 js重新加載數據 js重新加載頁面 js 視頻重新加載

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90807.html

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

摘要：壓縮部分是從網上搞下來的上傳部分是自己寫的，相當于在其他人的基礎上完善了這個壓縮上傳流程。文本框選擇圖片默認進行上傳，有時間再改一下按鈕上傳。壓縮部分是從網上搞下來的,上傳部分是自己寫的，相當于在其他人的基礎上完善了這個壓縮上傳流程。壓縮部分，壓縮率一般，重在瀏覽器支持方面好些，使用了FileReader和Canvas實現，FileReader瀏覽器支持方面還不錯：showImg(...

blair 2019-08-26 11:38 評論0 收藏0
原生 js 實現面對對象版瀑布流

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

tommego 2019-08-23 14:01 評論0 收藏0
[譯]如何構建自己的Progressive Image Loader

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

cartoon 2019-08-29 12:14 評論0 收藏0
前端資源加載重試

摘要：資源加載重試，則是提高用戶體驗中重要的一環。對加載失敗的進行重試。一個，有時候會包括及資源，其中一個加載失敗便會發起重試，直到有一個資源重試了次就判斷為失敗。通過資源加載重試，可大大減少中加載異步的頁面文件時，失敗而導致白屏的問題。介紹對于TO C的應用，用戶網絡千差萬別，總有各種網絡問題導致資源加載失敗，使得訪問時出現白屏，樣式錯亂等。資源加載重試，則是提高用戶體驗中重要的一環。...

Prasanta 2019-08-23 15:28 評論0 收藏0
構建離線WEB應用

摘要：使用離線應用構建應用服務端服務器配置創建文件客戶端構建，并在標簽上添加屬性，屬性值是服務器上配置的緩存資源列表的文件名配置相關事件，創建離線文件內容將狀態代碼轉化成狀態離線應用創建即使沒有互聯網連接也可以使用的應用程序。 HTML5新增了localstroage和application cache做離線緩存，兩種緩存各有應用的場景，今天我們說說application cache這種方案...

shleyZ 2019-08-26 13:48 評論0 收藏0