图片延迟加载的实现
2024-08-13 16:38:17 216人阅读
35
图片延迟加载也称懒加载,通常应用于图片比较多的网页,如果一个页面图片比较多,且页面高度或宽度有好几屏,页面初次加载时,只显示可视区域的图片,当页面滚动的时候,图片进入了可视区域再进行加载,这样可以显著的提高页面的加载速度,更少的图片并发请求数也可以减轻服务器的压力。如果用户仅仅在首屏停留,还可以节省流量。如果TAB中的图片较多,也同样可以应用于TAB中,当触发TAB时再进行图片的加载。
图片延迟加载的原理比较简单,先将图片的真实地址缓存在一个自定义的属性(lazy-src)中,而src地址使用一个1×1的全透明的占位图片来代替,当然占位图片也可以是其他的图片。
1 | <img src=http://www.mamicode.com/ "images/placeholder.png" lazy-src=http://www.mamicode.com/ "images/realimg.jpg" /> |
因为是使用javascript来加载图片,如果用户禁用了javascript,可以设置一个替代的方案。
1 | <img src=http://www.mamicode.com/ "images/placeholder.png" lazy-src=http://www.mamicode.com/ "images/realimg.jpg" alt= "" /> |
2 | <noscript><img src=http://www.mamicode.com/ "images/realimg.jpg" alt= "" /></noscript> |
页面初次加载时获取图片在页面中的位置并缓存(每次取offset的值会引发页面的reflow),计算出可视区域,当图片的位置出现在可视区域中,将src的值替换成真实的地址,此时图片就开始加载了。
当页面滚动的时候,再判断图片已经缓存的位置值是否出现在可视区域内,进行替换src加载。当所有的图片都加载完之后,将相应的触发事件卸载,避免重复操作引起的内存泄漏。将整个窗口看成是一个大容器,那么也可以在页面中设置一个小容器,在小容器中也同样可以实现图片的延迟加载。
下面是实现的代码,我写成了jQuery插件。
002 | $.fn.imglazyload = function( options ){ |
013 | vertical = o.vertical, |
014 | container = $( o.container ), |
015 | threshold = o.threshold, |
017 | elems = $.makeArray( $( this ) ), |
018 | dataName = ‘imglazyload_offset‘ , |
019 | OFFSET = vertical ? ‘top‘ : ‘left‘ , |
020 | SCROLL = vertical ? ‘scrollTop‘ : ‘scrollLeft‘ , |
021 | winSize = vertical ? container.height() : container.width(), |
022 | scrollCoord = container[ SCROLL ](), |
023 | docSize = winSize + scrollCoord; |
028 | init : function( coord ){ |
029 | return coord >= scrollCoord && |
030 | coord <= ( docSize + threshold ); |
033 | scroll : function( coord ){ |
034 | var scrollCoord = container[ SCROLL ](); |
035 | return coord >= scrollCoord && |
036 | coord <= ( winSize + scrollCoord + threshold ); |
039 | resize : function( coord ){ |
040 | var scrollCoord = container[ SCROLL ](), |
044 | return coord >= scrollCoord && |
045 | coord <= ( winSize + scrollCoord + threshold ); |
049 | var loader = function( triggerElem, event ){ |
052 | isTrigger, coord, elem, $elem, lazySrc; |
056 | if ( event !== ‘scroll‘ && event !== ‘resize‘ ){ |
064 | for ( ; i < elems.length; i++ ){ |
068 | lazySrc = http://www.mamicode.com/$elem.attr( o.attr ); |
070 | if ( !lazySrc || elem.src =http://www.mamicode.com/== lazySrc ){ |
075 | coord = $elem.data( dataName ); |
077 | if ( coord === undefined ){ |
078 | coord = $elem.offset()[ OFFSET ]; |
079 | $elem.data( dataName, coord ); |
082 | isTrigger = isCustom || trigger[ event ]( coord ); |
086 | elem.src = http://www.mamicode.com/lazySrc; |
088 | $elem.hide().fadeIn(); |
091 | $elem.removeData( dataName ); |
093 | elems.splice( i--, 1 ); |
100 | triggerElem.unbind( event , fire ); |
103 | container.unbind( o. event , fire ); |
105 | $( window ).unbind( ‘resize‘ , fire ); |
111 | var fire = function( e ){ |
112 | loader( $( this ), e.type ); |
116 | container = event === ‘scroll‘ ? container : $( this ); |
117 | container.bind( event , fire ); |
118 | $( window ).bind( ‘resize‘ , fire ); |
调用:
1 | $( ‘img‘ ).imglazyload({ |
默认的调用可以省略所有参数。
1 | $( ‘img‘ ).imglazyload(); |
图片延迟加载的插件API说明:
- attr string
- 存放图片真实地址的属性名,与HTML对应,默认是lazy-src。
- container dom & selector
- 默认的容器为window,可自定义容器。
- event stirng
- 触发图片加载的事件类型,默认为window.onscroll事件
- fadeIn boolean
- 是否使用jQuery的fadeIn效果来显示,默认是false。
- threshold number
- 页面滚动到离图片还有指定距离的时候就进行加载,默认是0。
- vertical boolean
- 是否横向滚动,默认为true(纵向)。
- loadScript(增强版的功能) boolean
- 是否无阻塞加载javascript广告图片,默认为false。
查看演示
图片延迟加载的插件下载地址:http://stylechen.com/wp-content/uploads/download/imglazyload.zip
原载于:雨夜带刀‘s Blog
本文链接:http://stylechen.com/imglazyload2.html
如需转载请以链接形式注明原载或原文地址。
图片延迟加载的实现
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉:
投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。