Solve 404 of js image loading problems _ javascript skills

This article mainly introduces how to solve the 404 problem of js image loading. If you are confused about this, you can refer to the problem that may occur when you have been operating the website for a long time, the reason may be that the image file does not exist or does not exist. The common solution is to set the 404 Image Hide or replace it with the default image.
Img Tag event attributes
The Time Attributes available for the img Tag are:
Onabort, feature, onblur, onchange, onclick, oncontextmenu, feature, ondrag, ondragend, ondragenter, feature, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload
Common events of img labels are as follows:
Onerror:An error occurs during image loading.
Onabort:When an image is loaded, the user clicks "Stop loading" to trigger the following message: "The image is being loaded ".
Onload:Triggered when the image is loaded.
1. Listening for onerror events on Images

// Native JS: function imgError (image) {// hide the image. style. display = 'none'; // replace it with the default image // document. getElementById ("img "). setAttribute ("src", "images/demo.png");} // use jQuery to process: function imgError (image) {$ (image ). hide (); // $ (this ). attr ("src", "images/demo.png ");}

Note: You need to define the processing function in the head to prevent the processing function from being read when an image loading error occurs.
2. Use jQuery to listen for error

// Normally, js is no longer embedded in HTML, and can be used. error listens to and processes images $ ('# test img '). error (function () {$ (this ). hide (); // $ (this ). attr ("src", "images/demo.png ");});

Note:Before jQuery is loaded, the processing function must be after img.
3. Use Function Processing

// Native JS solution function $ id (id) {return! Id | id. nodeType = 1? Id: document. getElementById (id);} function isType (o, t) {return (typeof o ). indexOf (t. charAt (0 ). toLowerCase () = 0;} // main logic function image (src, cfg) {var img, prop, target; cfg = cfg | (isType (src, 'o ')? Src :{}); img = $ id (src); if (img) {src = cfg. src | img. src;} else {img = document. createElement ('img '); src = src | cfg. src;} if (! Src) {return null;} prop = isType (img. naturalWidth, 'U ')? 'Width': 'naturalwidth'; img. alt = cfg. alt | img. alt; // Add the image and insert if requested (must be on DOM to load or // pull from cache) img. src = src; target = mongoid(cfg.tar get); if (target) {target. insertBefore (img, $ id (cfg. insertBefore) | null);} // Loaded? If (img. complete) {if (img [prop]) {if (isType (cfg. success, 'F') {cfg. success. call (img) ;}} else {if (isType (cfg. failure, 'F') {cfg. failure. call (img) ;}}else {if (isType (cfg. success, 'F') {img. onload = cfg. success;} if (isType (cfg. failure, 'F') {img. onerror = cfg. failure ;}} return img ;}

The preceding functions are useful in many ways:
1. obtain image information: whether the image can be downloaded, and the image width and height

Image ('img ', {success: function () {alert (this. width + "-" + this. height) ;}, failure: function () {alert ('image 404! ') ;},}); // Verify whether the image ('images/banner/banner_2.jpg', {success: function () {console. log ('sucess ')}, failure: function () {console. log ('failed')}, target: 'myerinerid', insertBefore: 'somechildofmycontainerid '});

2. Download and insert an image

var report = $id('report'),  callback = {   success : function () {    report.innerHTML += '
Success - ' + this.src + ' ('+this.offsetWidth+'x'+this.offsetHeight+')
';   },   failure : function () {    report.innerHTML += '
Failure - ' + this.src + ' ('+this.offsetWidth+'x'+this.offsetHeight+')
';   },   target : 'target'  };  image('img', callback); image('images/banner/banner_2.jpg', callback); 

The above is the solution to the 404 problem that occurs during image loading in js. I hope you will gain some benefits.