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/

　　http://www.w3schools.com/jsref/prop_img_complete.asp

转载于:https://www.cnblogs.com/mamboer/archive/2010/11/29/htmlninja-img-complete.html

HtmlNinja-图片预加载以及图片元素img的complete属性相关推荐

图片预加载与图片懒加载
图片预加载与图片懒加载图片预加载图片预加载主要是针对非icon类图片. 加载快,有良好的用户体验. 提前加载图片,当用户需要查看时可直接从本地缓存中渲染.可能因为图片很大,浏览器显示出它会用很长的 ...
小程序实现图片预加载（图片延迟加载）
这几天搞百度小程序,对接的网站需要展示大量图片,并且图片都是高清图片,因为要同步支持pc和手机站,在开发者工具中测试的时候,图片都是瞬间加载,因此感觉不出什么,但是真机预览的时候,特别是4G情况下,会 ...
图片预加载、图片延迟加载插件
网站上经常会有这种现象. 1.带有图片的列表页面图片没有加载过来时候,页面排版是乱的. 2.图片加载失败后显示一个裂痕玻璃图片并不友好为了解决这些现象我自己封装了了个插件: /*图片加载未完成显 ...
实现图片预加载的几种方式
感觉自己好久没有写博客了,可能自己变懒了.不知道为什么最近有点迷茫,不知道是该去学一下新东西还是该去看一下具有深度的东西.新的技术需要关注,但是我要去研究一下jquery的源码,这个东西很早就想去看, ...
android调用h5预加载图片,图片预加载 preload
图片预加载 HTML5学堂:2014年年初的时候,曾经在自己的博客"独行冰海"里写过关于图片预加载和懒加载的博文,当时的文章当中没有写什么关于预载的代码范例,当前打算把预载和懒载分 ...
图片预加载的几种方式
在开发的过程,我们经常会遇到这样的要求,当鼠标hover上去的时候,更改菜单的背景.如果没有进行图片预加载的话,会出现闪烁.那么拥有1px的眼睛的设计师们不会放过你的.为什么会出现这张情况?因为hov ...
微信 html自动加载js,微信小程序实现图片预加载组件
网页中的图片预加载图片预加载对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.我们知道在 Web 页面中实现图片的预加载 ...
前端VUE图片预加载
前景:先来说一下图片预加载跟图片懒加载有什么区别: 1.图片懒加载:相对于项目中的图片因为网络原因加载太慢,那么用户第一眼看到呢可能就是页面图片空白然后图片从上到下慢慢悠悠的加载出来,这个时候自定义化 ...
预加载显示图片的艺术
一般情况下网页中的图片都是随文档流依次加载的,什么时候用到则什么时候加载,但是有些时候这样的加载方式往往会影响用户体验,比如鼠标hover变换背景图片的时候,只有鼠标移入才会对变换的图片进行加载,这样 ...

HtmlNinja-图片预加载以及图片元素img的complete属性

HtmlNinja-图片预加载以及图片元素img的complete属性相关推荐

最新文章

热门文章