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

更新時(shí)間：2015年11月27日 14:19:31 作者：愛(ài)上程序猿

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

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

具體代碼如下：

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í)閱讀。

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

您可能感興趣的文章:

相關(guān)文章

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