有时图像无法加载404错误 - 如何使用jQuery解决此问题?

时间:2017-01-30 17:00:27

标签: javascript php jquery ajax

我的网站上有一张大背景图片,有时背景图片无法加载。

它在控制台中显示此错误:

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

如果我右键单击该链接并在"在新标签中打开"或刷新页面,图像就会正确显示。

这似乎是服务器端的某种资源请求错误,对吧?

我想在jQuery中找到一种方法:

  1. 检查图像是否正确加载
  2. 如果没有,请单独重新加载该图片
  3. PS:我已经看到了一些AJAX方法来获取图像标题并检查它是否返回200或404,但我认为这不适用于我的情况,因为AJAX调用将是另一个请求服务器,服务器可能会向AJAX返回200状态,即使它在加载页面时返回404。

    PS 2:它没有重复。这是原始的。这是最终产品。在该问题中,它没有指定您需要在错误上设置不同的图像,即备份图像。它只是再次引用相同的图像。

1 个答案:

答案 0 :(得分:2)

感谢@Snowmonkey我找到了解决方案:

$("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');
})

这是我在我的网站上使用的最终版本。它不仅检查图像是否正确加载并修复它,而且还为较小的屏幕加载较小的图像,使网站更快:

// 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');
    })
}