Use Custom Missing Image Graphics Using jQuery
Yesterday I posted an article about how you can use your own "missing image" graphics when an image fails to load using MooTools. Here's how to do the same using jQuery.
The jQuery JavaScript
$(document).ready(function() {
/* version 1 */
$('img.missing1').error(function() {
$(this).attr({
src: 'https://davidwalsh.name/demo/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: 'https://davidwalsh.name/demo/missing-image-2.jpg',
alt: 'Sorry! This image is not available!',
style:'border: 1px solid #f00;width:30px;height:28px;'
});
});
});
Note that I've provided two examples. If you want to get really specific, you can create multiple images and account for different sizes when possible.
A great website accounts for all of the details. This is yet another way of accounting for the finest of details. A website is NEVER complete!
![Facebook Open Graph META Tags]()
It's no secret that Facebook has become a major traffic driver for all types of websites. Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly. And of course there are Facebook "Like" and "Recommend" widgets on every website. One...
![Creating Scrolling Parallax Effects with CSS]()
Introduction
For quite a long time now websites with the so called "parallax" effect have been really popular.
In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...
![iPhone Checkboxes Using MooTools]()
One of the sweet user interface enhancements provided by Apple's iPhone is their checkbox-slider functionality. Thomas Reynolds recently released a jQuery plugin that allows you to make your checkboxes look like iPhone sliders. Here's how to implement that functionality using the beloved...
![:valid, :invalid, and :required CSS Pseudo Classes]()
Let's be honest, form validation with JavaScript can be a real bitch. On a real basic level, however, it's not that bad. HTML5 has jumped in to some extent, providing a few attributes to allow us to mark fields as required or only valid if matching...
Interesting :)
There’s just one thing -> you wrote (The MooTools Javascript)
Guess it should be ( The jQuery Javascript )
MooTools runs in your blood man :D
Oooooooops. Fixed.
But MooTools DOES run in my blood! :)
So we can “Use Custom Missing Image Graphics using JQuery or MooTools”. :)
Good job
umm….attr
$(this).attr({ src: 'http://davidwalsh.name/dw-content/missing-image.jpg', alt: 'Sorry! This image is not available!', title: 'Sorry! This image is not available!', style:'border: 1px solid #f00;width:110px;height:40px;' });Support for firefox :P
Do you know if it’s possible to use the .live function to bind this behavior?
That would enable invalid dynamic images that are injected after the document.ready event to also have the same behavior..
Besides that, thanks for a brilliant snippet..
Cheers,
Erik
But This means i have to give a “.missing” class to all images in my page ! ?? its not just a detection for the broken link
@Bassem: You could automate giving that class to all of the images using jQuery.
I usually use jquery’s builtin function and it works perfectly
$("img").error(function () { $(this).unbind("error").attr("src", "images/noimage.jpg"); });Hi I’m using this plugin and it’s working very well except for one problem. It seems to be interfering with the jQuery ui dialog feature. When I include $.idleTimer(120000) in my script firebug shows a ‘too much recursion’ error when I attempt to close an open modal dialog. When I remove that line of code it works fine. Any ideas? Thanks in advance
Very cool. Just what I needed. Thanks!!!!!!!!!!!!!!!!!!!!
There’s one small problem here. There’s no guarantee that the image will load after jQuery registers events. If the image loads first, this code won’t work. This is especially likely on image-heavy pages.
There is a workaround, though: add your error handler to the load event and explicitly reassign the image src. This makes sure the error handler has been registered before the image loads.
For example:
$('img').each(function() { $(this).error(function() { $(this).attr({ src: 'http://davidwalsh.name/dw-content/missing-image.jpg', alt: 'Sorry! This image is still caching!', style:'border: 1px solid #f00;width:110px;height:40px;' }); }); this.src = this.src; });