5

I have a site with lots of images. Some of them are missing on the server - deleted by the owner.

If image is not loaded (broken) I want to show placeholder - standard image, that indicates that image is missing.

I dont want to rewrite all templates so I cant add onError property to every image tag, so I cant use this solution: jQuery/JavaScript to replace broken images

Is it possible to write global function that will check all images and replace broken on load?

Community
  • 1
  • 1
Prosto Trader
  • 3,471
  • 3
  • 31
  • 52

2 Answers2

7

Yes, as you have jQuery in your tags you can use jQuery for that for example.

Bind onerror handler to all <img> nodes:

$( 'img' ).on( 'error', function() {
    $( this ).attr( 'src', 'http://path.to.your/image.jpg' );
});

In plain JS this can be done like this:

var images = document.getElementsByTagName( 'img' )
  , i, len;

for( var i = 0, len = images.length; i < len; i++ ) {
    (function( i ) {
        images[ i ].onerror = function() {
            images[ i ].onerror = null;
            images[ i ].src = 'http://path.to.your/image.jpg';
        };
    })( i );
}
antyrat
  • 27,479
  • 9
  • 75
  • 76
  • If you will put this script in DOM ready handler everything will be fine as DOM loaded before content. But if you will run this script after content ready this script will do nothing of course. – antyrat Nov 04 '13 at 17:27
  • 1
    Adding this will fix that... `$("img").each(function() { if (this.complete) $(this).load(); });` – Reinstate Monica Cellio Nov 04 '13 at 17:29
  • What should i do if some images loaded after the page is ready? – Prosto Trader Nov 04 '13 at 17:45
  • @ProstoTrader everything should be fine then. If all `` nodes was ready before you run your script. If you will add images after DOM loaded you will need to use `live` behaviour, for example `$( document ).on( 'error', 'img', function() {...` – antyrat Nov 04 '13 at 17:47
2

for the 65% of website that run on apache (http://w3techs.com/technologies/details/ws-apache/all/all) :

missing image is a server issue that you can fix on the server with a .htaccess in your image folder if you can upload a .htaccess in your image folder

ErrorDocument 404 /PATH/TO/IMAGE/FOLDER/placeholder.png

client will be 404 free + js payload will be less = your page will load faster

or from root .htaccess if you can upload/edit .htaccess in your root folder, you can :

  <FilesMatch ".(jpg|png|gif)$">
    ErrorDocument 404 /PATH/TO/IMAGE/FOLDER/placeholder.png
  </FilesMatch>

(credit to https://stackoverflow.com/a/10803705/1061871 for that second solution)

Community
  • 1
  • 1
mikakun
  • 2,203
  • 2
  • 16
  • 24
  • 1
    OP didn't mention that he uses any webserver and/or Apache. – antyrat Nov 04 '13 at 18:44
  • i'm failing to get your point here ? but i'll edit to please you – mikakun Nov 04 '13 at 18:55
  • I mean that `Prosto Trader` didn't mentioned that he uses webserver. Not all webservers are using Apache + not all JS applications require to have it. This answer is not suitable for all users. – antyrat Nov 04 '13 at 18:58
  • happy now mister ??? (fact is .htaccess is the best solution & you should not feel bad about it) – mikakun Nov 04 '13 at 18:58
  • The problem is not w/ .htaccess, the problem is that some people can use lighthttpd, iis, nginx or other webservers. Your answer can help only users that have webserver and use Apache on it. – antyrat Nov 04 '13 at 18:59
  • lol, what about ie6/7/8 you didn't mention which version of jquery to suit all users... – mikakun Nov 04 '13 at 19:00
  • plain JS solution will work on IE. I provided 2 methods to reach expected behaviour. I guess this hollywar is useless here. I'm done. – antyrat Nov 04 '13 at 19:02
  • you started it ! anyhow i'd have expected that it would be more than 65% (http://w3techs.com/technologies/details/ws-apache/all/all) – mikakun Nov 05 '13 at 05:22
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/40551/discussion-between-antyrat-and-mikakun) – antyrat Nov 05 '13 at 10:01