HtmlNinja-图片预加载以及图片元素img的complete属性
昨天在tutsplus.com上看到一篇不错的文章(http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-an-awesome-image-preloader/),作者Abhin Sharma手把手教“如何用jquery写一个浏览器兼容的图片预加载效果插件”,之前在搜狐的一些项目中有时也用到预加载图片的机制,所以便抱着对比学习的态度看了下他的具体实现~~看完觉得汗颜啊,里面用到我平时从来没用过img的complete属性,自己写的jquery插件也是直接使用jq封装好的load方法,比如$("#imgxx").load。
Abhin Sharma 这篇文章的真实内容其实并非如何预加载图片,而是处理“图片加载完毕前由上至下呈现时的糟糕的视觉体验”,你懂的:图片加载时是由上至下呈现的,视觉体验就是图片从头到脚慢慢出来,出现头的时候脚可能是黑麻麻的。所以在加载完毕前先显示一个小的loading图标,加载完毕后再渐显图片是现在国内外比较流行的图片呈现交互方式。上述的这篇文章正是教你如何实现这点。
至于为什么利用以及怎么利用Img标签的complete属性而不用图片的onload事件,文章中有解析噢。
大家去看看吧。
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-an-awesome-image-preloader/