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

資訊專欄INFORMATION COLUMN

Image Load Error Handler

longmon / 1768人閱讀

Preface

In the past, I posted an answer in SO about how to replace broken images. And the code is

window.addEventListener(
  "error",
  windowErrorCb,
  {
    capture: true
  },
  true
)

function windowErrorCb(event) {
  let target = event.target
  let isImg = target.tagName.toLowerCase() === "img"
  if (isImg) {
    imgErrorCb()
    return
  }

  function imgErrorCb() {
    let isImgErrorHandled = target.hasAttribute("data-src-error")
    if (!isImgErrorHandled) {
      target.setAttribute("data-src-error", "handled")
      target.src = "backup.png"
    } else {
      //anything you want to do
      console.log(target.alt, "both origin and backup image fail to load!")
    }
  }
}

And the point is :

Put the code in the head and executed as the first inline script. So, it will listen the errors happen after the script.

Use event capturing to catch the errors earlier, also for those events which don"t bubble.

Use event delegation which avoids binding events on each image.

Give the error img element an attribute after giving them a backup.png to avoid error of the backup.png and subsequent infinite loop like below:

img error->backup.png->error->backup.png->error->,,,,,

I thought the answer is almost perfect. But it turns out there is more scenes I don"t know.

No Src?

Until Chrome 70.0.3538.102 in win7, code below wouldn"t trigger error event.



But code below would trigger!


 


That does make sense. However, img without src wouldn"t hidden. They would have 1px border like:




In this case, we may have to do something about that. For instance,


img:not([src]) {
  opacity: 0;
}


or a default backgroundImage which will work on img though 1px border is still there.


img:not([src]) {
  background: no-repeat left top / cover;
  background-image: linear-gradient(to right, lightblue, pink); /*or your logo*/
}

BackgroundImage Error?

I still can"t find a perfect solution for backgroundImage. The best answer in SO is like:


.app__bg_img_box {
  background: no-repeat left top / cover;
  background-image: url(./images/github.png), linear-gradient(to right, lightblue, pink);
  /* you can also use default.png like code below */
  /* background-image: url(./images/github.png), url(./images/default.png); */
}


And the cons is obvious.





You have to take care of the transparency problem of the target image.


Users can see the toggle between target image and default image.


A little flaw is that default image will always be downloaded.



Another way I figured out is like code below. Here is the simplest code:


let backgroundDivs = Array.from(document.querySelectorAll(".app__bg_img_box"))
backgroundDivs.forEach(div => {
  let imgUrl = window
    .getComputedStyle(div)
    .backgroundImage.match(/url([""]?(.*)[""]?)/)
  if (imgUrl) {
    let img = new Image()
    img.src = imgUrl[1]
    img.onerror = function(event) {
      div.style.backgroundImage = "url(./images/default.png)"
      img.onerror = null
    }
  }
})


It will work well in most simple scenes but the cons is also obvious:



Code will be more complicated if you want to deal with multiple backgroundImages.


Each time you updated your dom structure, you may have to run the code above if you have add new divs with backgroundImage.


Ending

If lucky enough, we may have the new API in Images which would make code below work.


background: image("target.gif", "fallback.gif");

Reference


onerror event using background: url()


image-set-notation

           
               
                                           
                       
                 

            
                     
             
               

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

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

               

                      
               
              

              

                
相關(guān)文章

                
    
                             
                                                                    
  • 
                                                
    
                          
    Image Load Error Handler
    
                                                     
    Preface
In the past, I posted an answer in SO about how to replace broken images. And the code is
window.addEventListener(
  error,
  windowErrorCb,
  {
    capture: true
  },
  true
)

function windo...
    
                                                   
                          
    
                                
    
                                    cocopeak
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                                                       
  • 
                                                
    
                          
    Image Load Error Handler
    
                                                     
    Preface
In the past, I posted an answer in SO about how to replace broken images. And the code is
window.addEventListener(
  error,
  windowErrorCb,
  {
    capture: true
  },
  true
)

function windo...
    
                                                   
                          
    
                                
    
                                    roland_reed
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    ECMAScript6(15)：Promise 對象
    
                                                     
    摘要：建立對象用來傳遞異步操作消息，代表一個未來才會知道結(jié)果的事件，并且對不同事件提供統(tǒng)一的以便進一步處理。此時第一個被的的返回值作為新的對象的回調(diào)函數(shù)參數(shù)偽代碼由于沒有正確的由于沒有正確的將多個對象合并成一個新的實例。

Promise 建立
Promise 對象用來傳遞異步操作消息，代表一個未來才會知道結(jié)果的事件，并且對不同事件提供統(tǒng)一的 API 以便進一步處理。Promise 具有以下特...
    
                                                   
                          
    
                                
    
                                    edgardeng
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    前端性能與異常上報
    
                                                     
    摘要：回過頭來發(fā)現(xiàn)，我們的項目，雖然在服務(wù)端層面做好了日志和性能統(tǒng)計，但在前端對異常的監(jiān)控和性能的統(tǒng)計。對于前端的性能與異常上報的可行性探索是有必要的。這是我們頁面加載性能優(yōu)化需求中主要上報的相關(guān)信息。

概述
對于后臺開發(fā)來說，記錄日志是一種非常常見的開發(fā)習(xí)慣，通常我們會使用try...catch代碼塊來主動捕獲錯誤、對于每次接口調(diào)用，也會記錄下每次接口調(diào)用的時間消耗，以便我們監(jiān)控服務(wù)器接口...
    
                                                   
                          
    
                                
    
                                    gggggggbong
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評論

                   
               

              

                

                  
0條評論
   
                
 
                      

              

           

           

              
 
                

                   
              
  

                  
最新活動
 
           
                             
              





                                
              

           

        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    













<