图片适当载入渐显特效,基于jQuery.Lazyload来说明一下“图片适当载入渐显特效”,就是当即将浏览到有图片的地方,那张图片才开始自动加载,当然不是突然加载上去,而是渐显效果的加载起来,让浏览者感觉不是那么生硬。这样的好处就是可以加快访问速度和节省流量,因为很多浏览者说不定只是想看一下内容,或者根本看不完内容,这样他没看到的图片就不会显示。而且这样也不用担心浏览者会看不到图片,因为在即将浏览到图片的时候,图片会自动渐显的加载。 呵呵很帅吧,来看看怎么实现的吧,加速度和省流量,何乐而不为呢。 这个图片适当载入渐显特效是海天在HZLZH博友那看到的,海天感觉很不错,就载了过来,可以让更多朋友看到,顺便备份下,呵呵。 特效优点: 原理嘛,上面海天已经简单说过了,特效是判断了是否浏览到图片,如果没有则加载fill.gif(43字节),当浏览者鼠标滚动快要到图片地方,则自动加载图片,并以渐显效果显示,这样的显示效果对用户体验也有一定的提高。也就是说如果浏览者打开后瞬间关闭,屏幕上没有显示的图片是不会加载的,这样速度和流量肯定是节省不少的了,特别是那些图片博客。海天已经测试过,在浏览到图片之前,图片是不会被加载的。 方法: <script type="text/javascript" src="http://blog./up/jquery.lazyload.js"></script> <script type="text/javascript"> jQuery(document).ready( function($){ $("img").lazyload({ placeholder : "http://blog./up/fill.gif", effect : "fadeIn" }); }); </script> 代码中,红色部分可以换成你想要使用特效的图片,默认是全站图片使用。 注意!!本文中使用的jQ库不能使用google的1.3.2版的mini的jQ库,1.4.2到是可以使用,不过太新太大,海天不推荐使用。海天推荐使用WordPress自带的jQ库,文件位于:/wp-includes/js/jquery/jquery.js。 <script type='text/javascript' src='/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script> 到底显示的效果是什么样子的,大家可以用鼠标向下滚动,接着向下,到评论位置,那评论者的头像显示效果就是啦,效果不错吧。再给大家多图的文章,让大家慢慢观赏。 GOOGLE在香港的新家,程序员梦想的工作环境 |
|
来自: 命運之輪 > 《UI、UX、UED》