美高梅4858-美高梅4858mgm-[官方网站]

jQuery/原生JS 监听图片加载完成/加载失败 事件

假设有以下 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("图片加载失败");
});

原生 美高梅4858mgm 版:

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("图片加载失败事件");
};

如无特别声明,该文章均为 美高梅4858官方网站NowTime.cc)原创,转载请遵循 署名-非商业性使用 4.0 国际(CC BY-NC 4.0) 协议,即转载请注明文章来源。


标签: JQuery, 美高梅4858mgm

赞 (0)

添加新评论

XML 地图 | Sitemap 地图