网页中的一些图片技巧:图片预加载先模糊后清楚

一、预加载图片

     在页面加载完毕后,将下面可能用到图片预先加载到缓存中。也就是在用户打开当前页和切换到下一页这个间隙中加载图片,可以得到良好的用户体验。

<body onload=”if(document.images){new Image().src=’/images/nav_logo3.png’}”>

二、图片的先模糊后清晰效果

    这个效果的使用比较多,尤其像图片站、相册等,比如Picasa。要显示一个比较大的图片时,先显示一个尺寸小的或分辨率低图片,当大图加载完毕后再显示大图。到链接中感受一下效果吧,看看里面的图片。 这样的好处显而易见,在等等大图加载之前,让用户了解图片的大概;如果不是这样做,在用户等待加载一个几百K甚至上M的图片时,只能焦急地看着空白。

代码:

<img id="testImage" src="smallImg.jpg" alt="" width="500" height="”500”" />

<script><!--mce:0--></script>

模糊小图片效果

smallimg1
清晰大图:

bigimg


( ! ) Warning: Missing argument 1 for cwppos_show_review(), called in /data/www/enjoyphp/wp-content/themes/flat/content-single.php on line 29 and defined in /data/www/enjoyphp/wp-content/plugins/wp-product-review/includes/legacy.php on line 18
Call Stack
#TimeMemoryFunctionLocation
10.0001355192{main}( ).../index.php:0
20.0001355480require( '/data/www/enjoyphp/wp-blog-header.php' ).../index.php:17
30.200910159792require_once( '/data/www/enjoyphp/wp-includes/template-loader.php' ).../wp-blog-header.php:19
40.202310230936include( '/data/www/enjoyphp/wp-content/themes/flat/single.php' ).../template-loader.php:74
50.290310791024get_template_part( ).../single.php:5
60.290310791544locate_template( ).../general-template.php:167
70.290310791640load_template( ).../template.php:643
80.290410792024require( '/data/www/enjoyphp/wp-content/themes/flat/content-single.php' ).../template.php:686
90.301710785736cwppos_show_review( ).../content-single.php:29

2 评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注