jQuery滾動加載圖片效果的實現(xiàn)
更新時間:2013年03月06日 15:04:57 作者:
實現(xiàn)滾動加載的一個功能函數,需要的朋友可以參考一下
復制代碼 代碼如下:
<BR>/****************滾動加載圖片函數****************/
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", "");
}
}
}
}
上面是實現(xiàn)滾動加載的一個功能函數;下面在html代碼中需要在img中加一個xsrc屬性暫時存放真實圖片的路徑,src中則存放loading圖片的路徑,為每個需要實現(xiàn)這個功能的圖片加一個名字為“scrloadpic”的類。
復制代碼 代碼如下:
<img src="load.gif" xsrc="myimgae.jpg" class="scrloadpic"/>
最后在調用函數。
復制代碼 代碼如下:
scrollLoading();
$(window).bind("scroll", scrollLoading);
您可能感興趣的文章:
- jQuery延遲加載圖片插件Lazy Load使用指南
- jQuery實現(xiàn)預加載圖片的方法
- jQuery oLoader實現(xiàn)的加載圖片和頁面效果
- jquery插件lazyload.js延遲加載圖片的使用方法
- JQuery加載圖片自適應固定大小的DIV
- jquery中加載圖片自適應大小主要實現(xiàn)代碼
- Lazy Load 延遲加載圖片的jQuery插件中文使用文檔
- jQuery 瀑布流 絕對定位布局(二)(延遲AJAX加載圖片)
- jQuery 瀑布流 浮動布局(一)(延遲AJAX加載圖片)
- jquery動態(tài)加載圖片數據練習代碼
- jQuery 實現(xiàn)圖片的依次加載圖片功能
相關文章
jQuery Validation Engine驗證控件調用外部函數驗證的方法
這篇文章主要介紹了jQuery Validation Engine驗證控件調用外部函數驗證的方法,需要的的朋友參考下吧2017-01-01Jquery Easyui日歷組件Calender使用詳解(23)
這篇文章主要為大家詳細介紹了Jquery Easyui日歷組件Calender的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12