---- 淘宝优惠券 ----欢迎到论坛交流 ---域名问题某些图片和js资源无法访问,导致一些代码实例无法运行!(代码里gzui.net换成momen.vip即可)

简单几句JavaScript代码实现图片延迟加载并淡入淡出显示效果

前端开发 蚂蚁 861℃ 0评论

http://www.webhek.com/lazyload-image-fade
对于一个网站,最占用带宽,最影响页面显示速度的东西就是图片。图片是很重要的,有时是必须的,作为一个站长,我们是千方百计的使用各种技巧来优化图片,我们可以使用 ImageOptim 或 TinyPNG 来消减图片体积,或用 data URIs 和小图片来提升图片加载速度。如果一个页面上图片太大,或图片太多,无法消减,我们有另外一个方法来提升用户的页面显示体验,那就是延迟加载(lazy load)。之前我们介绍过使用 Lazy Load jQuery 插件。但其实还有一种更简单的方法,只需要几行代码,就能达到这种效果。同时,还附加一种淡入淡出的显示效果。

提示:你可以先修改部分代码再运行。

相比起其它各种的图片延迟加载技术,这种方法非常的简单,它几乎不要求其它任何条件,可以用在任何地方,使用起来非常灵活。

当然,简单有简单的好坏,也会因为简单而不足。它不具有图片图片滚动到可视窗口内再加载的功能。最终使用哪种技术,还是要看场景而定。

转载请注明:有爱前端 » 简单几句JavaScript代码实现图片延迟加载并淡入淡出显示效果

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情