jQuery/原生JS 监听图片加载完成/加载失败 事件 作者: Chuwen 时间: 2020-01-28 分类: JQuery # 假设有以下 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("图片加载失败事件"); }; ``` 标签: JQuery, JavaScript