• 反俄毒招!世界杯遇尴尬:假球票1万余张,涉案金额1亿美金! 2019-06-14
  • 萨拉赫,你再不上 埃及队就要回家啦 2019-06-14
  • 中外学者齐聚拉萨 首届中国西藏拉萨阿里象雄文化国际学术研讨会召开 2019-06-09
  • 一语惊坛(5月22日):精忠报国是每一个热血青年的夙愿! 2019-06-06
  • 世界是动态发展与平衡的,不会静止不变,指导社会的理论也是不断发展完善的,由相对真理向绝对真理发展接近,这话不是我臆造的,来自学的大学课本根据马克思著作编写... 2019-06-06
  • 重庆 民俗文化进校园(我们的节日·端午) 2019-06-04
  • 太阳是宇宙加油站?不明物体多次靠近“加油”,看清后屏住呼吸 2019-06-04
  • 代理加盟 2019全新代理计划 赚钱+省钱双管齐下,独立平台,丰厚利润!

    您现在的位置: 波西亚时光ns > 站长学院 > 建站教程 >

    波西亚时光伐木场赚钱:网站图片Lazyload延迟加载技术

    来源:未知 发布时间:2019-03-30热度: ℃我要评论
    在访问图片量较大的网站时,搜索引擎往往把所有图片都加载了,网站才算加载完毕。要是服务器空间不给力,那个等待时间是非常痛苦的。采用图片延迟加载后,用户进入网站只会加载其中的一部分,随着鼠标的滚动才加载剩余的部分,用户体验要好得多。 接下来分享一个较简单...

    波西亚时光ns www.1y2c.com

    图片延迟加载技术lazyload

           在访问图片量较大的网站时,搜索引擎往往把所有图片都加载了,网站才算加载完毕。要是服务器空间不给力,那个等待时间是非常痛苦的。采用图片延迟加载后,用户进入网站只会加载其中的一部分,随着鼠标的滚动才加载剩余的部分,用户体验要好得多。

           接下来分享一个较简单的网站图片延迟加载效果。经测试有效。

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Lazy Load 图片延迟加载</title>
    <!--[if lt IE 9]>
        <script src="html5shiv.js"></script><!--请下载到本地-->
    <![endif]-->
    </head>
    <body>
    <img class="lazy" data-original="img/pic1.jpg" width="765" height="574" alt="">
    <img class="lazy" data-original="img/pic2.jpg" width="765" height="574" alt="">
    <img class="lazy" data-original="img/pic3.jpg" width="765" height="574" alt="">
    <img class="lazy" data-original="img/pic4.jpg" width="765" height="574" alt="">
    <img class="lazy" data-original="img/pic5.jpg" width="765" height="574" alt="">
    <img class="lazy" data-original="img/pic6.jpg" width="765" height="574" alt="">
    <script src="jquery-1.11.0.min.js"></script><!--请下载到本地-->
    <script src="jquery.lazyload.js"></script><!--请下载到本地-->
    <script type="text/javascript" charset="utf-8">
      $(function() {
          $("img.lazy").lazyload({effect: "fadeIn"});
      });
    </script>
    </body>
    </html>

           所用到的页面代码及JS下载链接://pan.baidu.com/s/1pKHmIO7 密码:e8sp

    图片延迟加载与AJAX列表排序使用注意事项

           本人在做测试的时候发现:如果同时运用AJAX异步排序加载,参考文章《DedeCMS用AJAX实现列表按更新时间,点击,评论,星级排序》,出现加载不出对应的图片。采用模板AJAX局部替换的方法实现,务必把下面代码放在对应的AJAX模板后面(比如:list_article.htm对应的list_article_ajax.htm模板的后面),请参考本站任意一个列表页面代码。

    <p id="list">
     <p class="listbox">
      <ul class="e2">
      <p class="data-list">
      {dede:list pagesize="5"}
       <li>
         <a href='[field:arcurl/]'><img class="lazy" data-original='[field:litpic/]'alt="[field:title/]"/></a>
        [<b>[field:typelink/]</b>]
         <a href="[field:arcurl/]" class="title">[field:title/]</a>
         <span class="info">
          <small>日期:</small>[field:pubdate function="GetDateTimeMK(@me)"/]
          <small>点击:</small>[field:click/]
          <small>好评:</small>[field:scores/]
         </span>
         <p class="intro">[field:description/]...</p>
       </li>
      {/dede:list}
      </p><!--data-list-->
     </ul>
    </p>
    <!-- /listbox -->
    </p>
    <script src="jquery.lazyload.js"></script>

    本文地址://www.1y2c.com/news/1424.html

      责任编辑:波西亚时光ns

      发表评论

      评论列表(条)

      • 反俄毒招!世界杯遇尴尬:假球票1万余张,涉案金额1亿美金! 2019-06-14
      • 萨拉赫,你再不上 埃及队就要回家啦 2019-06-14
      • 中外学者齐聚拉萨 首届中国西藏拉萨阿里象雄文化国际学术研讨会召开 2019-06-09
      • 一语惊坛(5月22日):精忠报国是每一个热血青年的夙愿! 2019-06-06
      • 世界是动态发展与平衡的,不会静止不变,指导社会的理论也是不断发展完善的,由相对真理向绝对真理发展接近,这话不是我臆造的,来自学的大学课本根据马克思著作编写... 2019-06-06
      • 重庆 民俗文化进校园(我们的节日·端午) 2019-06-04
      • 太阳是宇宙加油站?不明物体多次靠近“加油”,看清后屏住呼吸 2019-06-04
      • 内蒙古快3强号遗漏 双色球开奖 神秘圣诞老人电子游艺 俄罗斯方舟 安徽11选5走势图今天 吉林十一选五今天开奖 香港皇家六合图库宝典 魂斗罗归来辅助软件 猎鱼达人3d最新视频 nba湖人vs凯尔特人 东莞虎门兴贸内衣城 一码中特三千佛 河南11选5走势图百度乐彩网官网 2010年排列三走势图 刺激战场改成和平精英是哪个傻逼想到的 3d开机号100期彩吧网