常熟人家blog头像

三行代码实现图片延迟加载技术

时间:13-10-30 栏目:idea 楼主:鲁智深 评论:0 点击: 1,633 次

什么是图片延迟加载技术

当我们打开网站的时候通过右侧下拉条,往下拉的时候,实现图片延迟加载。这是非常不错的技术,提高了用户体验,同时减少了页面加载的时间,也减轻的服务器的压力。

jquery

jquery

主要运用于,淘宝、京东、瀑布流、图片类网站。

jquery.lazyload实现图片延迟加载

什么是imagelazyload技术

在页面上的图片比较多的时候,打开一张图片必然会引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间。

imagelazyload技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质额度提升。

将下面三行代码放入 <head> </head>中

1
2
3
4
5
6
7
8
9
  <!-- jquery 类库-->
   <script type="text/javascript" src="js/jquery.min.js" ></script>
   <!-- lazyload -->
   <script type="text/javascript" src="js/jquery.lazyload.mini.js"></script>
   <!-- 调用lazyload方法 -->
    <script type="text/javascript">
    var jq = jQuery.noConflict();
    jq(function(){jq("img").lazyload({placeholder:"images/load.gif",effect:"fadeIn"});});
  </script>

注意{placeholder:"images/load.gif",effect:"fadeIn"}中的需要load.gif,需要你自己创建一个load.gif图片放入images中。

jquery代码库下载

百度网盘

原理

当屏幕在第一屏的时候其第二屏没有加载,当到第二屏的时候,第三屏,没有加载。

收藏本页

    声明:  如有关于wordpress代码问题请留言即可...!

------====== 本页公告 ======------
   建站程序也叫开源程序,建站程序都是免费的,现在国内比较流行的建站程序有个人博客(wordpress,zblog),门户(dedecms),商城(shopex),论坛(discuz!)本博就是用wordpress作为基础搭建起来的网站。