UDN-企业互联网技术人气社区

板块导航

浏览  : 896
回复  : 7

[jQuery] 聊聊image标签中处理load事件的那些小经(Ji)验(Qiao)

[复制链接]
htmlman的头像 楼主
发表于 2017-1-2 16:07:14 | 显示全部楼层 |阅读模式
  很多情况下,我们都需要自己处理image相关的加载逻辑,及其相关的回调函数逻辑,在本文中我将介绍一下JavaScript中处理相关image标签,大家尝尝会遇到的一些情景,希望对于大家有帮助,当然,如果有大牛能够提供更好的解决方案和解答,本猿也不尽感谢,OKey,听我慢慢道来 ~~  ^o^

  情景再现 

  大家在开发web应用过程中,往往会有些操作,例如,特定web动画是需要在某些文件体积比较大的背景图加载完毕之后才可以触发滴,所以通常情况下,我们这些程序猿都理所当然的把这些触发动作放到了img标签加载的相关load事件处理过程中,jQuery相关代码参考如下:
  1. $('#big-image').on('load', function(){
  2.     // 在回掉函数中执行的一些逻辑
  3.     ......
  4. });
复制代码

  期望行为

  图片加载完成后,触发该图片的load事件,然后触发callback回调函数中要执行的相关逻辑或者动画。

  实际情况

  实际场景中,这些比较大的图片相关的load事件并不是每次都需要被触发滴,存在偶然性

  解决方案

  以下是一个更新版本的代码书写:
  1. $('#big-image').on('load', function(){
  2.     // 在回掉函数中执行的一些逻辑
  3.         ......
  4. }).each(function(){
  5.     this.complete && $(this).trigger('load');
  6. });
复制代码

  相比较前面书写的相关代码来说,我们做了一个小小的代码优化改动,绑定load使用了jQuery中的.one方法而放弃使用.on方法,之所以这么书写是因为希望load事件在整个代码逻辑中只被触发一次,而且避免了被重复执行。

  注意: 如果使用的是jQuery, 触发load事件时,我们可以使用.load()来触发,如果你使用的第三方JavaScript类库是zepto的话,那么就只能乖乖使用.trigger('load')方法啦~

  代码分析

  这里本猿从专业角度和职业角度详细分析下image的load事件和complete属性 ^O^

  首先看看MDN的一些load事件文字描述:

  The load event is fired when a resource and its dependent resources have finished loading.

  简单翻译过来就是:

  load事件是在一个资源并且该资源的依赖资源都完成加载中之后才被触发

  这里大家关注一下关键字 finished loading ,也就是说用户代理端(例如,浏览器/webView)第一次从服务器上请求资源完成,这算finished loading, 当再次刷新这个页面,如果浏览器使用了上次请求的资源(缓存到本地的资源),那就不算做loading, 自然也就不会触发资源的load事件。当然本猿对于浏览器中本地缓存的应用策略没有深入了解过,这里就暂且不表,待本猿深入研究后再与各位大牛分享一二, 嘿嘿

  complete属性

  MDN对image元素的complete属性做了如下的描述:

  HTMLImageElement.complete Read only

  Returns a Boolean that is true if the browser has finished fetching the image, whether successful or not. It also shows true, if the image has no src value.

  简单翻译如下:

  HTMLImageElement.complete 只读属性

  这个定义的关键点在于finished fetching,换个说法,这个属性只是用来表明浏览器是否履行了他的职责(fetch), 与图片是否能正常显示并没有半毛关系(图片显示与否是开发者自己的责任),所以同一个页面进行第二次刷新的时候,如果浏览器还记得他已经fetch过这个图片了(其中一种表现即是浏览器缓存了图片),那么这个属性值就是true, 否则就是false.

  它跟图片的load事件没有直接关系,但是还是有一些间接关系,如果complete值为true话(这种情况一般是非首次加载页面), 那就表明浏览器去抓取过图片了,那图片就有可能被缓存,这时load事件就不会触发,这种情况就需要像如上解决方案中的那样手动触发load来辅助实现

相关帖子

发表于 2017-1-2 16:07:43 | 显示全部楼层
个人觉得js是一种解释性语言,它提供了一个非常方便的开发过程,不需要编译,js与HTML标识结合在一起,从而方便用户的使用操作。
使用道具 举报

回复

发表于 2017-1-2 16:07:43 | 显示全部楼层
回帖支持下楼主,请眼熟我,我叫“不帅“
使用道具 举报

回复

发表于 2017-1-2 16:07:44 | 显示全部楼层
js太强大了,好多工作前端都可以做了…
使用道具 举报

回复

发表于 2017-1-2 16:07:44 | 显示全部楼层
我完全是被标题<<聊聊image标签中处理load事件的那些小经(Ji)验(Qiao)>>吸引过来的
使用道具 举报

回复

发表于 2017-1-2 16:07:44 | 显示全部楼层
OMG!介是啥东东
使用道具 举报

回复

发表于 2017-1-2 16:07:44 | 显示全部楼层
OMG!介是啥东东
使用道具 举报

回复

发表于 2017-1-2 16:07:44 来自手机 | 显示全部楼层
LZ敢整点更有创意的不?兄弟们等着围观捏~
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部