128 Пропавшие изображения на вашем сайте могут нанести вашему бизнесу ощутимый урон. Иногда изображения удаляются или портятся без вашего уведомления.
Если вам нравится большая красная “x” в IE, то эта статья не для вас.
Ниже представлены три сниппета и их примеры исполнения замены пропавших изображений, и если они вам нужны, то поехали...
HTML
|
1 2 |
<p><img src="http://cnn.com/image-that-doesnt-exist.jpg" alt="Missing 1" class="missing1" /></p> <p><img src="http://cnn.com/dw-content/image-that-doesnt-exist-2.jpg" alt="Missing 2" class="missing2" /></p> |
Выполнено через классы. Не забудьте про них.
MooTools JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
window.addEvent('domready',function() { /* version 1 */ $$('img.missing1').addEvent('error',function() { this.set({ src: 'http://davidwalsh.name/dw-content/missing-image.jpg', alt: 'Sorry! This image is not available!', styles: { width: 110, height:40 } }); }); /* version 2 */ $$('img.missing2').addEvent('error',function() { this.set({ src: 'http://davidwalsh.name/dw-content/missing-image-2.jpg', alt: 'Sorry! This image is not available!', styles: { width: 30, height:28 } }); }); }); |
Примечание: посмотрите пример, там два варианта исполнения, с использованием большой и маленькой картинки.
Пример
jQuery JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(document).ready(function() { /* version 1 */ $('img.missing1').error(function() { $(this).attr({ src: 'http://davidwalsh.name/dw-content/missing-image.jpg', alt: 'Sorry! This image is not available!', style:'border: 1px solid #f00;width:110px;height:40px;' }); }); /* version 2 */ $('img.missing2').error(function() { $(this).attr({ src: 'http://davidwalsh.name/dw-content/missing-image-2.jpg', alt: 'Sorry! This image is not available!', style:'border: 1px solid #f00;width:30px;height:28px;' }); }); }); |
Пример
Dojo JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
dojo.addOnLoad(function() { /* version 1 */ dojo.query('img.missing1').connect('onerror',function() { dojo.attr(this,{ src: 'http://davidwalsh.name/dw-content/missing-image.jpg', alt: 'Sorry! This image is not available!', style:'border: 1px solid #f00;width:110px;height:40px;' }); }); /* version 2 */ dojo.query('img.missing2').connect('onerror',function() { dojo.attr(this,{ src: 'http://davidwalsh.name/dw-content/missing-image-2.jpg', alt: 'Sorry! This image is not available!', style:'border: 1px solid #f00;width:30px;height:28px;' }); }); }); |
Пример
Конечно, вы всегда должны делать все, чтобы не допускать пропадания или порчи изображений, но как вариант, подстраховка в виде JavaScript кода не помешает.
