快捷導(dǎo)航

jQuery滾動(dòng)加載圖片效果的實(shí)現(xiàn)

更新時(shí)間：2013年03月06日 15:04:57 作者：

實(shí)現(xiàn)滾動(dòng)加載的一個(gè)功能函數(shù)，需要的朋友可以參考一下

<BR>/****************滾動(dòng)加載圖片函數(shù)****************/
     function scrollLoading(){
         var st = $(window).scrollTop(), sth = st + $(window).height();
         var $targetpics = $("img.scrloadpic");
         var len = $targetpics.length;
         for(var i=0; i< len; i++)
         {
             var $temppic = $targetpics.eq(i);
             var post = $temppic.position().top;
             var posb = post + $temppic.height();

             if((post > st && post < sth) || (posb > st && posb < sth))
             {

                 var url = $temppic.attr("xsrc");
                 if(url != "")
                 {
                    $temppic.attr("src", url);
                    $temppic.attr("xsrc", "");
                 }
             }
         }
     }

　上面是實(shí)現(xiàn)滾動(dòng)加載的一個(gè)功能函數(shù)；下面在html代碼中需要在img中加一個(gè)xsrc屬性暫時(shí)存放真實(shí)圖片的路徑，src中則存放loading圖片的路徑，為每個(gè)需要實(shí)現(xiàn)這個(gè)功能的圖片加一個(gè)名字為“scrloadpic”的類。

復(fù)制代碼代碼如下:

　最后在調(diào)用函數(shù)。

復(fù)制代碼代碼如下:

scrollLoading(); 
$(window).bind("scroll", scrollLoading); 

您可能感興趣的文章:

相關(guān)文章

jquery 插件學(xué)習(xí)（三）
用慣jquery的用戶可能習(xí)慣于連寫行為，也就是說在調(diào)用一個(gè)方法之后，緊跟著調(diào)用另一個(gè)方法，如此連寫不斷，形成一個(gè)珍珠鏈，而且編寫靈活，方便
2012-08-08
JQUERY 實(shí)現(xiàn)窗口滾動(dòng)搜索框?？啃Ч?類似滾動(dòng)?？?
由于分頁(yè)的效果卻又是非常令人厭惡的。滾動(dòng)條無疑是一種簡(jiǎn)單而又高效的一種方式。而這里，處于對(duì)用戶體驗(yàn)的考慮，我使用Jquery實(shí)現(xiàn)了一種類似滾動(dòng)?？康男Ч?，感興趣的朋友可以參考下哈
2013-03-03
checkbox批量選中,獲取選中項(xiàng)的值的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猚heckbox批量選中,獲取選中項(xiàng)的值的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-06-06
jquery實(shí)現(xiàn)購(gòu)物車基本功能
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)購(gòu)物車基本功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10
jQuery 和 CSS 的文本特效插件集錦
這篇文章主要匯總了20種jQuery 和 CSS 的文本特效插件，都是比較熱門的特效插件，推薦給有需要的小伙伴。
2014-12-12
jQuery實(shí)現(xiàn)參數(shù)自定義的文字跑馬燈效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)參數(shù)自定義的文字跑馬燈效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-08-08
jQuery Validation PlugIn的使用方法詳解
這篇文章主要介紹了jQuery Validation PlugIn的使用方法，需要的朋友可以參考下
2015-12-12
js實(shí)現(xiàn)圖片放大縮小功能后進(jìn)行復(fù)雜排序的方法
這是一個(gè)基于jquery的圖片效果，它的作用是：當(dāng)圖片點(diǎn)擊變大(變小)時(shí)，其它圖片按照一定的規(guī)則進(jìn)行排序運(yùn)動(dòng)
2012-11-11
Jquery each方法跳出循環(huán),并獲取返回值(實(shí)例講解)
這篇文章主要是對(duì)Jquery each方法跳出循環(huán),并獲取返回值進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-12-12
jquery實(shí)現(xiàn)input框獲取焦點(diǎn)的方法
下面小編就為大家?guī)硪黄猨query實(shí)現(xiàn)input框獲取焦點(diǎn)的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-02-02