2

I have a large background image in my website, and some times the background image doesn't load.

It shows this error in console:

GET http://www.mywebsite.com/wp-content/uploads/2017/01/cover_background.jpg 404 (Not Found)

If I right click the link and "Open in new tab", or refresh the page, the image shows correctly.

This seems to be some kind of resource request error server-side, right?

I wanted to find a way in jQuery to:

  1. Check if the image was loaded correctly
  2. If it didn't, reload that image alone

PS: I've seen some AJAX methods for getting the image header and check if it returned 200 or 404, but I don't think this would work in my case, because that AJAX call would be another request to the server, and the server might return a 200 status to AJAX, even though it returned 404 when loading the page.

PS 2: It's not duplicated. That's raw. This is final product. In that question it doesn't specify that you need to set a DIFFERENT image on error, a backup image. It just references the same image again.

Lucas Bustamante
  • 15,821
  • 7
  • 92
  • 86
  • 2
    Have you read http://stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-in-javascript ? Specifically, you can trigger events on load or on error. The first answer looks like what you're looking for. – Snowmonkey Jan 30 '17 at 17:02
  • *This seems to be some kind of resource request error server-side, right?* - Yes, the server has replied with a 404. Some hosting companies may do this if preset limits are exceeded on a hosted site. – Alex K. Jan 30 '17 at 17:06
  • Thanks @Snowmonkey, that was really helpful. Thanks as well Alex K. – Lucas Bustamante Jan 30 '17 at 17:39
  • 1
    Possible duplicate of [Check if an image is loaded (no errors) in JavaScript](http://stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-in-javascript) – toesslab Jan 30 '17 at 17:41

1 Answers1

2

Thanks to @Snowmonkey I came to a solution:

$("img#background").on('error', function() {
    // Backup image in case of error
    $("img#background").attr('src', 'http://www.mywebsite.esp.br/wp-content/uploads/2017/01/fundo-1366-768-1.jpg');
})

This is the final version I'm using in my website. Not only it checks if the image was loaded correctly and fixes it, but it also loads a smaller image for smaller screens, making the site faster:

// Background image for resolutions between 600px and 1500px
if ($(window).width() > 600 && $(window).width() < 1500) {
    // First we set a background image
    $("img#background").attr('src', 'http://www.mywebsite.esp.br/wp-content/uploads/2017/01/fundo-1366-768.jpg');
    // Then we check if it returned an error
    $("img#background").on('error', function() {
        // If it did, we set a "backup" image. In this case, an exact copy of the original
        $("img#background").attr('src', 'http://www.mywebsite.esp.br/wp-content/uploads/2017/01/fundo-1366-768-1.jpg');
    })
// Background image for resolutions higher than 1500px
} else if ($(window).width() > 1500) {
    // Same process as above, but with a different src
    $("img#background").attr('src', 'http://www.mywebsite.esp.br/wp-content/uploads/2017/01/fundo-1920-1080.jpg');
    $("img#background").on('error', function() {
        $("img#background").attr('src', 'http://www.mywebsite.esp.br/wp-content/uploads/2017/01/fundo-1920-1080-1.jpg');
    })
}
Lucas Bustamante
  • 15,821
  • 7
  • 92
  • 86