jQuery滾動加載圖片效果的實現(xiàn)
更新時間:2013年03月06日 15:04:57 作者:
實現(xiàn)滾動加載的一個功能函數(shù),需要的朋友可以參考一下
復(fù)制代碼 代碼如下:
<BR>/****************滾動加載圖片函數(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", "");
}
}
}
}
上面是實現(xiàn)滾動加載的一個功能函數(shù);下面在html代碼中需要在img中加一個xsrc屬性暫時存放真實圖片的路徑,src中則存放loading圖片的路徑,為每個需要實現(xiàn)這個功能的圖片加一個名字為“scrloadpic”的類。
復(fù)制代碼 代碼如下:
<img src="load.gif" xsrc="myimgae.jpg" class="scrloadpic"/>
最后在調(diào)用函數(shù)。
復(fù)制代碼 代碼如下:
scrollLoading();
$(window).bind("scroll", scrollLoading);
您可能感興趣的文章:
- jQuery延遲加載圖片插件Lazy Load使用指南
- jQuery實現(xiàn)預(yù)加載圖片的方法
- jQuery oLoader實現(xiàn)的加載圖片和頁面效果
- jquery插件lazyload.js延遲加載圖片的使用方法
- JQuery加載圖片自適應(yīng)固定大小的DIV
- jquery中加載圖片自適應(yīng)大小主要實現(xiàn)代碼
- Lazy Load 延遲加載圖片的jQuery插件中文使用文檔
- jQuery 瀑布流 絕對定位布局(二)(延遲AJAX加載圖片)
- jQuery 瀑布流 浮動布局(一)(延遲AJAX加載圖片)
- jquery動態(tài)加載圖片數(shù)據(jù)練習(xí)代碼
- jQuery 實現(xiàn)圖片的依次加載圖片功能
相關(guān)文章
jQuery Validation Engine驗證控件調(diào)用外部函數(shù)驗證的方法
這篇文章主要介紹了jQuery Validation Engine驗證控件調(diào)用外部函數(shù)驗證的方法,需要的的朋友參考下吧2017-01-01詳解jQuery獲取特殊屬性的值以及設(shè)置內(nèi)容
在本篇內(nèi)容里小編給大家分享了jQuery獲取特殊屬性的值以及設(shè)置內(nèi)容相關(guān)知識點,有需要的朋友們參考下。2018-11-11Jquery Easyui日歷組件Calender使用詳解(23)
這篇文章主要為大家詳細介紹了Jquery Easyui日歷組件Calender的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12jQuery插件echarts去掉垂直網(wǎng)格線用法示例
這篇文章主要介紹了jQuery插件echarts去掉垂直網(wǎng)格線用法,結(jié)合實例形式對比分析了jQuery圖標插件echarts針對垂直網(wǎng)格線的相關(guān)設(shè)置操作技巧,需要的朋友可以參考下2017-03-03