使用默认图片替代某张图为空时的情况-白红宇

使用默认图片替代某张图为空时的情况

阅读量：7078 次

发布时间：2019-06-28

本文共 1151 字，大约阅读时间需要 3 分钟。

今天听小伙伴在群上讨论当图片为空时使用默认图的情况，作为好奇一下，自己写了一段程序好验证一下；

在这里不得不谈ready和load的区别了：

reay先于load执行，就是在构造html,dom模型的时候执行，而load的话，则在页面加载完毕之后执行，以下是执行步骤：

1.解析HTML结构

2.加载外部脚本和样式表文件

3.解析并执行脚本代码

4.构造HTML DOM模型 //ready

5.加载图片等外部文件

6.页面加载完毕 //load

方法1：在ie下不能用，火狐体验不是很好

$(function(){

$("img").one("error",function(){//设置one防止默认图片也是空的，而导致陷入死循环      $(this).attr("src","images/01.jpg");//设置默认图片

})

})

方法2：ie，火狐，谷歌都可以用，这个方法是百度得来的ps:naturalWidth是html5判断图片width的属性，有兴趣的小伙伴可以去百度一下（涨知识了）。

$(window).load(function() {
       $('img').each(function() {
           if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
               this.src = 'images/01.jpg';          }      });  }); 不过在ie8下会把所有图片替代为默认图：

方法3：测试了下，在ie8下也没有问题（当然了这个也是我去看别人的代码，修改过来的，已经过本人的苦苦测试）原文地址：

$(window).load(function() {

$('img').each(function(){
      var error = false;     if (!this.complete) {
          error = true;     }     if (typeof this.naturalWidth != "undefined" && this.naturalWidth == 0) {
          error = true;     }     if(error){
              this.src = "images/01.jpg";     } });