Solve the problem of 404 when loading js image

After operating the website for a long time, the picture 404 cannot be avoided. The reason may be that the picture file does not exist in the first place or does not exist at present. A common solution is to use 404 picturesHide or replace with the default image。

img tag event attribute

The time attributes that can be used by the img tag are:

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

Commonly used events for img tags are as follows:

onerror：It is triggered when an error occurs during image loading.
onabort：When the image is loaded, the user triggers it by clicking to stop loading, which usually triggers a prompt here: "The image is loading".
onload：Triggered when the image is loaded.

1. Listen to onerror events on images

&lt;img src="" onerror="imgError(this);" /&gt; 
 
// Native JS:function imgError(image){ 
 // Hide pictures  = 'none'; 
 // Replace with the default image // ("img").setAttribute("src", "images/"); 
} 
 
// Use jQuery to handle:function imgError(image){ 
 $(image).hide(); 
 // $(this).attr("src", "images/"); 
}

Note: The processing function needs to be defined in the head to prevent the processing function from not being read when the image loads.

2. Use jQuery to listen for error

// Usually, you will not inline js in HTML anymore. You can use .error to monitor images.$('#test img').error(function() { 
 $(this).hide(); 
 // $(this).attr("src", "images/"); 
});

Notice:jQuery loading needs to be before img, and processing functions need to be after img

3. Use functions to process

// Native JS solutionfunction $id(id) { 
 return !id ||  === 1 ? id : (id); 
} 
function isType(o, t) { 
 return (typeof o).indexOf((0).toLowerCase()) === 0; 
} 
 
// Main logicfunction image(src, cfg) { 
 var img, prop, target; 
 cfg = cfg || (isType(src, 'o') ? src : {}); 
 
 img = $id(src); 
 if (img) { 
 src =  || ; 
 } else { 
 img = ('img'); 
 src = src || ; 
 } 
 
 if (!src) { 
 return null; 
 } 
 
 prop = isType(,'u') ? 'width' : 'naturalWidth'; 
  =  || ; 
 
 // Add the image and insert if requested (must be on DOM to load or 
 // pull from cache) 
  = src; 
 
 target = $id(); 
 if (target) { 
 (img, $id() || null); 
 } 
 
 // Loaded? 
 if () { 
 if (img[prop]) { 
 if (isType(,'f')) { 
 (img); 
 } 
 } else { 
 if (isType(,'f')) { 
 (img); 
 } 
 } 
 } else { 
 if (isType(,'f')) { 
  = ; 
 } 
 if (isType(,'f')) { 
  = ; 
 } 
 } 
 
 return img; 
}

The above functions have many uses:

1. Obtain image information: Whether the image can be downloaded, the image width and height

image('img',{ 
 success : function () { alert( + "-" + ); }, 
 failure : function () { alert('image 404!'); }, 
}); 
 
// Verify that the resource is downloadedimage('images/banner/banner_2.jpg', { 
 success : function () {('sucess')}, 
 failure : function () {('failure')}, 
 target : 'myContainerId', 
 insertBefore : 'someChildOfmyContainerId' 
});

2. Download and insert the image

var report = $id('report'), 
 callback = { 
 success : function () { 
  += '<p>Success - ' +  + ' ('++'x'++')</p>'; 
 }, 
 failure : function () { 
  += '<p>Failure - ' +  + ' ('++'x'++')</p>'; 
 }, 
 target : 'target' 
 }; 
 
image('img', callback); 
image('images/banner/banner_2.jpg', callback);

The above is the solution to the 404 problem that occurs when the image is loaded. I hope everyone can gain something.