华山资源网

JavaScript实现判断图片是否加载完成的3种方法整理
网络编程 2024/11/18 佚名
3 1

有时候我们在前端开发工作中为了获取图片的信息，需要在图片加载完成后才可以正确的获取到图片的大小尺寸，并且执行相应的回调函数使图片产生某种显示效果。本文主要整理了几种常见的javascipt判断图片加载完成时的方法，并通过代码与实际应用相结合进行解释与说明。

onload方法

通过向img标签添加onload属性，并填入相应的函数来执行后续的javascipt代码。如下代码例子中img元素默认是不显示的，通过onload判断加载完成后再将图片显示出来。

复制代码 代码如下:
<img class="pic1" onload="get(this)" src="/UploadFiles/2021-04-02/...">  
<script type="text/javascript">
function get(ts){
 ts.style.display = 'block';  //显示图片
}
</script>

优点：可以将javascript代码部分放置于页面的任何部分加载，并且可以用于多数任意图片上。使用比较简单，易理解。

缺点：必须在每个标签上都贴上onlaod属性，在某些无法直接操作HTML代码，或者需要代码精简的情况下不适用

javascipt原生方法

选取指定ID的图片，通过onload指定回调方法，在图片加载完成后弹出“图片加载已完成”字样提示。
复制代码 代码如下:
<img id="pic1" src="/UploadFiles/2021-04-02/...">  
<script language="JavaScript">
    document.getElementById("pic1").onload = function () {
        alert("图片加载已完成");
    }
</script>

优点：简单易用，不影响HTML代码。

缺点：只能指定一个元素，javascipt代码必须置于图片元素的下方

jquery方法

为每个class为pic1的图片元素绑定事件，通过jquery的load方法，将元素渐现出来。

注意，不要在$(document).ready()里绑定load事件。
复制代码 代码如下:
<script type="text/javascript">
$(function(){
 $('.pic1').each(function() {
  $(this).load(function(){
   $(this).fadeIn();
  });
    });
})
</script>

优点：可以批量绑定元素事件，并且不影响HTML代码内容

缺点：需要jquery库的支持，代码需要放置到需要操作元素的下方。

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com