jQuery实现图片的延时加载及淡入效果

优秀设计资源 2010年05月08日

在打开某些网站的时候,你会发现,当你把滚动条拉下来的时候,图片才会被加载,然后,闪一道光再出现的淡入效果。其实这就是用伟大的jQuery来实现的,它的名字叫:ImageLazyLoad

假如你的网站,想实现的话,很简单。只要在<head></head>之间,插入下面的代码即可

<script src="https://img.liehuo.cc/usr/uploads/js/lazyload/jquery.min.js" type="text/javascript"></script>
<script src="https://img.liehuo.cc/usr/uploads/js/lazyload/jquery.lazyload.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
 $("img").lazyload({
  effect : "fadeIn"
 });
});
</script>

演示效果:

instantShift - Single Page Website Design Inspiration

instantShift - Single Page Website Design Inspiration

instantShift - Single Page Website Design Inspiration

instantShift - Single Page Website Design Inspiration

instantShift - Single Page Website Design Inspiration

instantShift - Single Page Website Design Inspiration

instantShift - Single Page Website Design Inspiration

instantShift - Single Page Website Design Inspiration

instantShift - Single Page Website Design Inspiration

instantShift - Single Page Website Design Inspiration

instantShift - Single Page Website Design Inspiration

网友评论
Top