Handling of web page image loading errors

In the website , There is often a situation , quite a lot picture Or because the image address itself points to an unknown address （404 Address ）, Or because the image server itself failed to give img Return the correct picture file stream , It will lead to pictures error perhaps alt Information , If there is no corresponding img Set width and height , It will even affect the layout of the entire page , For the above problems , We can use the method of monitoring pictures error The event is then handled accordingly . Such as ：

<img src=" Picture address " onerror="this.src=' Replace picture address '"/>

Copy

According to normal logic , There will be no problem with the above processing , But it's easy to ignore a situation , That is, if the replacement image address does not exist , that onerror The code inside will be executed repeatedly , Until the picture is requested , If you can't ask all the time , That's equivalent to an endless cycle . Regarding this , Add a line of code to the above code

this.onerror=none;

Copy

After performing the first image replacement , Cancel the of the picture error Event monitoring . If the above code is used jquery The implementation is as follows

$("img").each(function (index,ele) {
     $(ele).one("error",function () {
         $(this).attr("src"," Replace picture address ");
     })
});

Copy

use one The bound event will be executed only once , So there will be no dead cycle