代理加盟 2019全新代理計劃 賺錢+省錢雙管齊下,獨立平臺,豐厚利潤!

您現在的位置: 秀站網 > 站長學院 > 建站教程 >

網站圖片Lazyload延遲加載技術

來源:未知 發布時間:2019-03-30熱度:我要評論
在訪問圖片量較大的網站時,搜索引擎往往把所有圖片都加載了,網站才算加載完畢。要是服務器空間不給力,那個等待時間是非常痛苦的。采用圖片延遲加載后,用戶進入網站只會加載其中的一部分,隨著鼠標的滾動才加載剩余的部分,用戶體驗要好得多。 接下來分享一個較簡單...

織夢模板免費下載,無需注冊無需充值

圖片延遲加載技術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下載鏈接:http://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>

本文地址:http://www.yxrxyy.live/news/1424.html

責任編輯:秀站網

    發表評論

    評論列表(條)

      北京28是什么彩票