快捷導(dǎo)航

jQuery實現(xiàn)圖片預(yù)加載效果

更新時間：2015年11月27日 14:19:31 作者：愛上程序猿

這篇文章分享一款基于jQuery圖片預(yù)加載ydxLazyLoad.js代碼。這是一款基于ydxLazyLoad.js插件實現(xiàn)的圖片延遲加載特效，感興趣的小伙伴們可以參考一下

本文實例講述了jQuery實現(xiàn)圖片預(yù)加載效果代碼。分享給大家供大家參考。具體如下：
運行效果截圖如下：

具體代碼如下：

html代碼：

<div class="main">
 <br>
 <div class="title">圖片預(yù)加載</div>
 <div class="content">
  <div class="img">
  <a href="">
   <img lazyloadsrc="images/1.jpg" alt="" width="200" height="120">
  </a>
  <span class="loading"></span>
  </div>
  <div class="img">
  <a href="">
   <img lazyloadsrc="images/2.jpg" alt="" width="200" height="120">
  </a>
  <span class="loading"></span>
  </div>
  <div class="img">
  <a href="">
   <img lazyloadsrc="images/3.jpg" alt="" width="200" height="120">
  </a>
  <span class="loading"></span>
  </div>
  <div class="img">
  <a href="">
   <img lazyloadsrc="images/4.jpg" alt="" width="200" height="120">
  </a>
  <span class="loading"></span>
  </div>
  <div class="img">
  <a href="">
   <img lazyloadsrc="images/5.jpg" alt="" width="200" height="120">
  </a>
  <span class="loading"></span>
  </div>
  <div class="img">
  <a href="">
   <img lazyloadsrc="images/6.jpg" alt="" width="200" height="120">
  </a>
  <span class="loading"></span>
  </div>
 </div>
 </div>

js代碼：

 $(function () {
  $("[lazyLoadSrc]").YdxLazyLoad({
  onShow: function () {
   $(this).parent().next().hide()
  }
  });
 });

本文已被整理到了《jquery圖片加載方法匯總》，歡迎大家學(xué)習(xí)閱讀。

大家在加載圖片時就會看到這種效果，現(xiàn)在知道是實現(xiàn)的過程了吧，希望大家喜歡小編分享的jQuery實現(xiàn)圖片預(yù)加載效果。

您可能感興趣的文章:

相關(guān)文章

jQuery搜索框效果實現(xiàn)代碼(百度關(guān)鍵詞聯(lián)想)
這篇文章主要介紹了jQuery搜索框效果實現(xiàn)代碼，百度關(guān)鍵詞聯(lián)想，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-08-08
jQuery實現(xiàn)切換頁面過渡動畫效果
這是一款效果非?？岬膉Query和CSS3通過AJAX調(diào)用切換頁面過渡動畫特效插件。該頁面切換特效使用AJAX來動態(tài)加載鏈接內(nèi)容，在頁面加載的時候，使用CSS3來制作非?？岬捻撁孢^渡動畫效果。插件中使用pushState方法來管理瀏覽器的瀏覽歷史，需要的朋友可以參考下
2015-10-10
jQuery插件實現(xiàn)表格隔行變色及鼠標(biāo)滑過高亮顯示效果代碼
這篇文章主要介紹了jQuery插件實現(xiàn)表格隔行變色及鼠標(biāo)滑過高亮顯示效果代碼,涉及jQuery針對頁面元素動態(tài)操作及響應(yīng)鼠標(biāo)事件動態(tài)修改頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下
2016-02-02
為指定的元素添加遮罩層的示例代碼
遮罩在某些情況下還是比較實用的，下面為大家介紹下如何為指定的元素添加遮罩層，感興趣的朋友可以了解下
2014-01-01
jQuery Masonry瀑布流布局神器使用詳解
這篇文章主要為大家詳細(xì)介紹了jQuery Masonry瀑布流布局神器的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
快速學(xué)習(xí)jQuery插件 Cookie插件使用方法
快速學(xué)習(xí)jQuery插件中的Cookie插件使用方法，一個輕量級的cookie插件，可以讀取、寫入、刪除 cookie，感興趣的小伙伴們可以參考一下
2015-12-12
jquery使用append(content)方法注意事項分享
append(content)函數(shù)的功能向每個匹配的元素內(nèi)部追加內(nèi)容，在使用方法上需要引起大家的注意，詳細(xì)看下面示例
2014-01-01
利用jquery.qrcode在頁面上生成二維碼且支持中文
這篇文章主要介紹了利用jquery.qrcode在頁面上生成二維碼且支持中文。需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02
jQuery獲取checkboxlist的value值的方法
最近著手一個項目用到了服務(wù)器空間checkboxlist ,使用起來是方便，可以想要從js獲取值就稍微麻煩點了，google后找到了如下方法，感興趣的小伙伴們可以參考一下
2015-09-09
jQuery 判斷元素整理匯總
本文給大家匯總介紹了jQuery的幾種判斷元素的方法，包括是否含有某 class、元素是否存在、是否 checked以及元素是否禁用，都是常用的方法，希望大家能夠喜歡
2017-02-02