图片加载失败之后的处理(引申一下img的complete和onload方法）

2024-06-25 15:14| 来源: 网络整理| 查看: 265

如果你的项目用了jquery。可以使用这个方法；

$("img").error(function(){ 　　//当图片加载失败时，你要进行的操作　　//$(this).attr('src','images/no_pic.jpg'); });

如果没有jquery，可以使用HTML的DOM事件，onerror事件：

HTML 中: 　　尝试一下 JavaScript 中: 　　object.onerror=function(){myScript};尝试一下 JavaScript 中, 使用 addEventListener() 方法:（注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。）　　object.addEventListener("error", myScript);支持的 HTML 标签: , , , ,

下面是complete和onload；

document.getElementById('load').onclick = function() { var img = new Image(); img.src="images/1-logo.png"; if(img.complete) { console.log('dd'); } img.onload = function() { console.log('ff') } }

打印结果如下：

可以看到，第一次的时候，仅执行了onload，也就是我们看到的仅打印了‘ff'文字，而接下来的每次点击都会出现“dd”,"ff"，这是为什么呢？继续测试，改变位置：

document.getElementById('load').onclick = function() { var img = new Image(); if(img.complete) { console.log('dd'); } img.onload = function() { console.log('ff') } img.src=""; } 仅打印dd；

document.getElementById('load').onclick = function() { var img = new Image(); if(img.complete) { console.log('dd'); } img.onload = function() { console.log('ff') } img.src="images/1-logo.png"; }

dd，ff一起显示；

【本文地址】

公司简介

联系我们