After running the website for a long time,It is unavoidable that the picture 404 will occur. The reason may be that the picture file does not exist or does not currently exist.A common solution is to put 404 imagesHide or replace with default image.

img tag event attributes

The available time attributes for 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, onmovedown, onmooutout, onmouse onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

The common events of the img tag are as follows:

onerror:Triggered when an error occurs during image loading.

onabort:When the image loads,Fired when the user stops loading by clicking,A hint is usually triggered here:"Picture is loading".

onload:Fires when the image is loaded.

1. Listen to the onerror event on the picture

<img src="someimage.png" />
//Native js:
function imgerror (image) {
 //hide picture
 //Replace with default image
 //document.getelementbyid ("img"). setattribute ("src", "images/demo.png");
//use jquery processing:
function imgerror (image) {
 $(image) .hide ();
 //$(this) .attr ("src", "images/demo.png");

Note:The processing function needs to be defined in the head to prevent the processing function from being read when the image is loaded incorrectly.

2. Use jquery to listen for errors

//Usually no longer inline js in html, can be used.
error monitor the picture
$("#test img"). error (function () {
 $(this) .hide ();
 //$(this) .attr ("src", "images/demo.png");

note:jquery loading needs to be before img, the processing function needs to 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)
 target=$id (cfg.target);
 if (target) {
  target.insertbefore (img, $id (cfg.insertbefore) || null);
 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")) {
  if (istype (cfg.failure, "f")) {
 return img;

The above functions have many uses:

1. Get picture information:whether the picture is downloadable,Picture width and height

image ("img", {
 success:function () {alert (this.width + "-" + this.height);}, failure:function () {alert ("image 404!");},});
//verify whether the resource is downloaded
image ("images/banner/banner_2.jpg", {
 success:function () {console.log ("sucess")}, failure:function () {console.log ("failure")}, target:"mycontainerid", insertbefore:"somechildofmycontainerid"

2. Download and insert pictures

var report=$id ("report"), callback={
  success:function () {
   report.innerhtml +="<p>success-" + this.src+ "(" + this.offsetwidth + "x" + this.offsetheight + ")</p>";
  },  failure:function () {
   report.innerhtml +="<p>failure-" + this.src+ "(" + this.offsetwidth + "x" + this.offsetheight + ")</p>";
  },  target:"target"
image ("img", callback);
image ("images/banner/banner_2.jpg", callback);
  • Previous Simple understanding of the use of break and continue statements in Swift language
  • Next Introduce Jquery data (), Jquery stop (), jquery delay () functions one by one (details)