• 网站首页
  • 好站推荐
  • 焦点互联网
  • 技术相关
  • 经典网页设计
  • 优秀设计资源
  • 工业设计
  • 其它
烈火前端
  • 首页
  • 好站推荐
  • 互联网
  • 技术相关
  • 经典网页
  • 优秀资源
  • 工业设计
  • 其它
站内搜索

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

相关文章
25+矢量图片素材下载
40+优秀设计SVG工具
35个创意人物矢量图
15个移动端自适应 Lightbox 应用
© 2025 Design by vpshu.com // 黑ICP备2024032218号-1 黑公网安备23100002000223号
© 2025 Design by vpshu.com