jQuery怎么實現圖片的依次加載圖片功能

這篇文章給大家分享的是有關jQuery怎么實現圖片的依次加載圖片功能的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

css代碼：

ul#portfolio{margin:0;padding:0;}
ul#portfolio li{float: left;margin:0 5px 0 0;width:250px;height: 250px;list-style: none;}
ul#portfolio li.loading{background: url(../images/spinner.gif) no-repeat center center;}
ul#portfolio li img{width:250px;height: 250px;display: block;}

js代碼：

$(function(){
  var images=new Array();
  images[0]='./images/ads_one.jpg';
  images[1]='./images/ads_two.jpg';
  images[2]='./images/ads_three.jpg';
  //獲取了圖像的數量
  var max=$(images).length;
  //如果包含一張以上的圖像，那么創建對應的UL元素家人到wrapper div中，并且調用LoadImage方法。
   if(max>0){
    //create the UL element
    var ul=$('<ul id="portfolio"></ul>');
    //append to div#wrapper
    $(ul).appendTo($('#wrapper'));
    //load the first image
    LoadImage(0,max);
   }
  //在LoadImage方法中，循環遍歷所有的圖像，對每個圖像創建li元素
  function LoadImage(index,max){
   if(index<max){
    //利用attr方法為li元素增加了css樣式，即加上了loading的gif背景。
    var list=$('<li id="portfolio_'+index+'"></li>').attr('class','loading');
    //把li添加到ul元素中
    $('ul#portfolio').append(list);
    //獲取當前的li元素
    var curr=$("ul#portfolio li#portfolio_"+index);
    //創建圖像元素
    var img=new Image();
    //加載圖像
    $(img).load(function(){
    $(this).css('display','none');
    $(curr).removeClass('loading').append(this);
    $(this).fadeIn('slow',function(){
      //采用回調函數的方法，在當前元素成功執行fadeIn方法之后 再去調用下一個元素的LoadImage方法，這樣就能實現多個圖像的順序加載了。
      LoadImage(index+1,max);
    });
    }).error(function(){
      $(curr).remove();
      LoadImage(index+1,max);
    }).attr('src',images[index]);
   }
  }
})

jquery是什么

jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發網站。

感謝各位的閱讀！關于“jQuery怎么實現圖片的依次加載圖片功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！