收藏文章 楼主
JS 判断或检测图片是否加载成功完美解决方案[原创]
版块:前端UI学习设计文章   类型:精华   作者:乐天   查看:10493   回复:0   获赞:9   时间:2016-03-26 12:45:03

http://www.hadsky.com/index.php?c=read&id=278&page=1一文中给出了2个方案,第二个方案也就是用chkimgisok函数来判断图片是否加载成功,在本地测试中反映非常好,可是上传到空间就出现问题了,域名使用了云加速和网络影响的原因,网速较慢时,本来存在的图片加载过慢,函数就会误判为此图片资源有问题,进而启用相应的js代码而导致有头像的用户显示了游客头像,研究了一会,想出了一个更好的解决办法,就是用img的onerror属性去驱动整个事件的完成,相应代码如下:

<img src="错误的图片资源" onerror="触发的js代码"  style="display: none;">
这个img标签display为none,用户不可见,若图片资源错误则触发了onerror中的代码,这样就避开了网络原因的影响,也不影响效果的实现。


举例:

//下面是摘抄HadSky轻论坛puyuetian_whitestyle模板判断用户头像是否加载成功的代码。
<h1 id="article-title" class="am-article-title" style="background-image: url(userheadimg/{$LZU_id}.png);background-size: 28px 28px;background-repeat: no-repeat;background-position: 0px 3px;padding-left: 35px;">{$LZC_title}</h1>
<img src="userheadimg/{$LZU_id}.png" onerror="document.getElementById('article-title').style.backgroundImage='url(userheadimg/2.png)'" style="display: none;">

有些梦虽然遥不可及,但并不是不可能实现。 
回复列表
默认   热门   正序   倒序

回复:JS 判断或检测图片是否加载成功完美解决方案[原创]

暂无用户组
退出
等级:0级
天豆:
游客:

公告

近期本站被人为恶意注册及发布垃圾帖,本站已开启普通用户发帖审核功能,VIP系列用户组不受影响,一但发现发布违法或垃圾帖的用户,该用户账号将会被永久封号,请大家共同维护互联网环境,共创美好互联网未来。

永久免费,购授权享豪礼

3年个人版授权+1940天豆仅需194元

终身个人版授权+3880天豆仅需388元

3年尊享版授权+13580天豆仅需1358元

终身尊享版授权+27160天豆仅需2716元

Powered by HadSky 7.9.3

©2015 - 2021 HadSky

购买产品 用户文档 加入QQ群 授权查询 网站绑定 客户案例 陕ICP备13005805号

您的IP:3.89.204.127,2021-12-02 23:52:35,Processed in 0.03503 second(s).

支持原创软件,抵制盗版,共创美好明天!
头像

用户名:

粉丝数:

签名:

资料 关注 好友 消息
已有0次打赏
(9) 分享
分享

请保存二维码或复制链接进行分享

取消