假设有以下 HTML 代码
<img id="img" src="./logo.png" alt="这是图片简介"/>
jQuery 版:
jQuery 监听图片加载完成事件
$("#img").on("load", function(){
console.log("图片加载完成了");
});
jQuery 监听图片加载失败事件
$("#img").on("error", function(){
console.log("图片加载失败");
});
jQuery 监听图片加载完成/加载失败事件 简化版代码
$("#img").on("load", function(){
console.log("图片加载完成了");
}).on("error", function(){
console.log("图片加载失败");
});
原生 JavaScript 版:
var img_selector = document.querySelector("img");//查询 id 为 img 的节点
//监听图片加载完成事件
img_selector.addEventListener("load", function(){
console.log("图片加载完成事件");
});
//监听图片加载失败事件
img_selector.addEventListener("error", function(){
console.log("图片加载失败事件");
});
简化版代码
var img_selector = document.querySelector("img");//查询 id 为 img 的节点
//监听图片加载完成事件
img_selector.onload = function(){
console.log("图片加载完成事件");
};
//监听图片加载失败事件
img_selector.onerror = function(){
console.log("图片加载失败事件");
};