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

puyuetian 乐天 关注 九级站长 创始人
发表于前端UI学习设计文章版块

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次打赏
(9) 分享
分享

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

取消