Web サイトを長期間運営していると、画像 404 が表示されるのは避けられません。その理由は、画像ファイルが存在しないか、現在存在していない可能性があります。一般的な解決策は、404 イメージ を非表示にするか、デフォルトのイメージ に置き換えることです。
img タグのイベント属性
img タグで使用できる時間属性は次のとおりです:
onbort、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
img タグでよく使用されるイベントは次のとおりです:
onerror: イメージの読み込み中にエラーが発生するとトリガーされます。
onbort: 画像の読み込み中に、ユーザーがクリックして読み込みを停止すると、通常はここで「画像を読み込み中です」というプロンプトが表示されます。
onload: 画像がロードされるときにトリガーされます。
1. 画像のエラー イベントを監視します
<img src="someimage.png" onerror="imgError(this);" /> // 原生JS: function imgError(image){ // 隐藏图片 image.style.display = 'none'; // 替换为默认图片 // document.getElementById("img").setAttribute("src", "images/demo.png"); } // 使用jQuery处理: function imgError(image){ $(image).hide(); // $(this).attr("src", "images/demo.png"); }
注: 画像読み込みエラーが発生したときに処理関数が読み込まれないことを防ぐために、処理関数をヘッドに定義する必要があります
2. jQuery を使用してエラーを監視します
// 通常不会再HTML里面内联js,可以使用.error对图片进行监听处理 $('#test img').error(function() { $(this).hide(); // $(this).attr("src", "images/demo.png"); });
注: jQuery の読み込みは img の前に行う必要があり、処理関数は img の後に行う必要があります
3. 関数処理を使用する
// 原生JS解决方案 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; } // 主要逻辑 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 = $id(cfg.target); 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; }
上記の関数には多くの用途があります:
1. 画像情報を取得します: 画像がダウンロードできるかどうか、画像の幅と高さ
image('img',{ success : function () { alert(this.width + "-" + this.height); }, failure : function () { alert('image 404!'); }, }); // 验证资源是否下载 image('images/banner/banner_2.jpg', { success : function () {console.log('sucess')}, failure : function () {console.log('failure')}, target : 'myContainerId', insertBefore : 'someChildOfmyContainerId' });
2. 写真をダウンロードして挿入します
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);
上記は、画像をロードする際の 404 問題に対する js の解決策です。何かを得ることができれば幸いです。