大奖国际其它精選教程 使用lazysizes延遲加載圖片圖片多的網站建議使用 ...

使用lazysizes延遲加載圖片圖片多的網站建議使用

此插件可直接引入lazysizes即可
<script src="lazysizes.min.js"></script>
  延遲加載(lazy load)是(也稱爲懶加載)Hibernate3關聯關係對象默認的加載方式,延遲加載機制是爲了避免一些無謂的性能開銷而提出來的,所謂延遲加載就是當在真正需要數據的時候,才真正執行數據加載操作。
  瀏覽器加載過程中,由於圖片過多導致加載速度過慢,那麼我們只需要在“看得見”的地方加載圖片,而“看不見”的地方會跟隨滾動條的滾動而加載。

step1 默認加載
<img data-src="moren.jpg" class="lazyload"  width="500" height="500"/>
  step2 從模糊到清晰

<img src="vague.jpg" data-src="clear.jpg" class="lazyload" width="500" height="500"/>
  預先定義一張品質較差的圖片,之後再通過懶加載展示品質高且清晰的圖片。

  step3 響應式圖片
<img data-sizes="auto" class="lazyload" data-src="img500w.jpg" data-srcset="img240w.jpg 240w, img320w.jpg 320w,img500w.jpg 500w, img800w.jpg 800w, img1024w.jpg 1024w," /
  在開發過程中,項目需要用到響應式佈局,在移動端的情況下,我們不需要用到太過清晰的圖片
簡單案例:
  1. <figure class="img br">
  2.                 <a href="/"><img class="lazyload" src="/images/oad.gif" data-src="/d/file//w5.jpg" alt="標題"></a>
  3.         </figure>



1. 有部分資源爲網上收集或仿製而來,若模板侵犯了您的合法權益,請來信通知我們會及時刪除,謝謝!

2. 本站提供的模板來源於網絡,收集供學習交流之用.

3. 請勿改成非法網站,否則後果自負,與本站無關。

編輯於 7 天前

暫無回答,趕快搶沙發吧