最新公告
  • 欢迎您光临牛气网,本站秉承“用心服务,做好服务”致力为站长提供优质的售后服务!立即加入我们
  • 织梦网站图片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下载链接:https://pan.baidu.com/s/13rl1KM_RbXVj-v714NsqaA 密码:85en

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

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

      <div id="list">

      <div class="listbox">

      <ul class="e2">

      <div 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}

      </div><!–data-list–>

      </ul>

      </div>

      <!– /listbox –>

      </div>

      <script src="jquery.lazyload.js"></script>

    1、本站所有资源皆来源于网络和用户自行上传,因此不包括售后和技术,敬请谅解!
    2、本站不保证所提供的源码的准确性、安全性和功能完善性,资源仅用于学习用!
    3、您下载的资源,请务必在24小时内删除,资源仅提供本地测试,请勿商用或者非法用途都与本站无关,一切后果自负!
    4、如发现资源下载不了,或者侵权请及时联系客服或者邮箱admin#niuqi.net,#改为@!
    牛气网 » 织梦网站图片Lazyload延迟加载懒加载技术

    发表评论

    售后服务:

    • 售后服务范围 1、商业模板使用范围内问题免费咨询
      2、源码安装、模板安装(一般 ¥50-300)服务答疑仅限SVIP用户
      3、单价超过200元的模板免费一次安装,需提供服务器信息。
      付费增值服务 1、提供dedecms模板、WordPress主题、discuz模板优化等服务请详询在线客服
      2、承接 WordPress、DedeCMS、Discuz 等系统建站、仿站、开发、定制等服务
      3、服务器环境配置(一般 ¥50-300)
      4、网站中毒处理(需额外付费,500元/次/质保三个月)
      售后服务时间 周一至周日(法定节假日除外) 9:00-23:00
      免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: admin@niuqi.net),我们会及时删除,给您带来的不便,我们深表歉意!

    Hi, 如果你对这款模板有疑问,可以跟我联系哦!

    联系作者

    发表评论

    售后服务:

    • 售后服务范围 1、商业模板使用范围内问题免费咨询
      2、源码安装、模板安装(一般 ¥50-300)服务答疑仅限SVIP用户
      3、单价超过200元的模板免费一次安装,需提供服务器信息。
      付费增值服务 1、提供dedecms模板、WordPress主题、discuz模板优化等服务请详询在线客服
      2、承接 WordPress、DedeCMS、Discuz 等系统建站、仿站、开发、定制等服务
      3、服务器环境配置(一般 ¥50-300)
      4、网站中毒处理(需额外付费,500元/次/质保三个月)
      售后服务时间 周一至周日(法定节假日除外) 9:00-23:00
      免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: admin@niuqi.net),我们会及时删除,给您带来的不便,我们深表歉意!

    Hi, 如果你对这款模板有疑问,可以跟我联系哦!

    联系作者
    • 62会员总数(位)
    • 3448资源总数(个)
    • 1831本月发布(个)
    • 0 今日发布(个)
    • 377已陪伴您(天)

    牛气网NIUQI.NET站长源码平台

    开通SVIP会员 了解详情
    升级SVIP尊享更多特权立即升级