如何通过js判断并重载加载失败与超时的图片？

冯纪忠雄

Mar 15, 2020

第一步，保证已经导入了jquery库
第二步，在网页加载完毕后（网页加载完毕，但不代表图片加载完毕，从此时开始计时比较合适）使用setTimeout定时器来指定多少毫秒后来运行函数进行判断图片是否加载超时即可。
第三步，过了指定的毫秒后开始判断此时指定图片元素是否加载完成，
使用 $('构成选择器的字符串')[0].complete 来判断，这里假设是选中的元素只有一个，所以索引就直接用了0，而complete属性则是布尔型，false或true，true则代表图片加载完毕，false则代表图片依然在加载过程中，即图片没有在指定的毫秒内成功加载，此时就要进行图片重载。
第四步，重载图片的方式很简单，把图片元素的src改成原有的图片url外加随机的不重复的后缀即可。

举一个例子，假设图片的id为“fuck-img”，需要此图片0.8秒内被加载，如若超过0.8s没有被加载，则重载此图片；示例代码如下：

$(function(){
  setTimeout(reload_img, 800);
});

function reload_img(){
    if ( $('#fuck-img')[0].complete == false ){
        var old_img_url = $('#fuck-img').attr('src');
        var timestamp = new Date().getTime().toString();
        var new_img_url = old_img_url + "?fuck=" + timestamp;
        $('#fuck-img').attr('src',  new_img_url );
        console.log('地振高冈，一派西山千古秀，图片已经重新加载了');
    } else {
        console.log('门朝大海，三合河水万年流，图片早已加载成功了');
    }
}