我们在网站上总能见到这样的效果，若是有图片，图片都是先用loading加载一小段时间，然后紧接着出来要显示的图片，即效果如下：
v2_loading.gif，几秒钟时间过渡到
v2_pic_01_s.jpg这样，这就是图片延时加载。
具体实现技术如下：
1）引入jquery库文件；
2）引入jquery.inview.min.js文件；
3）html结构：
<a href="http://q.wan.com" target="_blank" title="秦时明月"><img src="http://static.wan.com/index/images/v2_pic_01_s.jpg" data-original="http://static.wan.com/index/images/v2_pic_01.jpg" alt="秦时明月" /></a>
4）css样式：a{background-image: url(http://static.wan.com/index/images/v2_loading.gif);}
5）script引用函数方法：
<script>
$(function(){
//延时加载页面图片。
$('img[data-original]').live('inview', function(event, isVisible) {//这里要用live，不能用on；
if (!isVisible) {
return;
}
var img = $(this);
// Show a smooth animation
img.css('opacity', 0);
img.load(function() {
img.animate({
opacity: 1
}, 500);
});
// Change src
img.attr('src', img.attr('data-original'));
// Remove it from live event selector
img.removeAttr('data-original');
});
});
</script>
以上步骤即可实现该效果。