jquery實(shí)現(xiàn)異步加載圖片(懶加載圖片一種方式)
首先將插件在jq后面引入
(function($) {
// alert($.fn.scrollLoading);
$.fn.scrollLoading = function(options) {
var defaults = {
attr: "data-url"
};
var params = $.extend({}, defaults, options || {});
params.cache = [];
$(this).each(function() {
var node = this.nodeName.toLowerCase(),
url = $(this).attr(params["attr"]);
if(!url) {
return;
}
var data = {
obj: $(this),
tag: node,
url: url
};
params.cache.push(data);
});
var loading = function() {
var st = $(window).scrollTop(),
sth = st + $(window).height();
$.each(params.cache, function(i, data) {
var o = data.obj,
tag = data.tag,
url = data.url;
if(o) {
post = o.position().top;
posb = post + o.height();
if((post > st && post < sth) || (posb > st && posb < sth)) {
if(tag === "img") {
o.attr("src", url);
} else {
o.load(url);
}
data.obj = null;
}
}
});
return false;
};
loading();
$(window).bind("scroll", loading);
};
})(jQuery);
然后在底部初始化
$(document).ready(function () {
//實(shí)現(xiàn)圖片慢慢浮現(xiàn)出來的效果
$("img").load(function () {
//圖片默認(rèn)隱藏
$(this).hide();
//使用fadeIn特效
$(this).fadeIn("5000");
});
// 異步加載圖片,實(shí)現(xiàn)逐屏加載圖片
$(".scrollLoading").scrollLoading();
});
需要修改img標(biāo)簽為
<img class="scrollLoading" data-url="image/logo.jpg" src="images/load.gif" />
data-url表示將要異步加載的圖片,src表示首先加載的圖片(一般會是小圖片,或者是一個動畫,網(wǎng)頁中全部的src鏈接同一個圖片,這樣網(wǎng)頁就加載快好多,這個時候再異步的加載要加載的圖片,也就現(xiàn)在要說的功能)
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jquery中的 $("#jb51")與document.getElementById("
以前沒注意過,認(rèn)為jquery 中的 $("#jb51") 與 document.getElementById("jb51") 是一回事,指的是同一個東西。2011-07-07
老生常談jquery中detach()和remove()的區(qū)別
下面小編就為大家?guī)硪黄仙U刯query中detach()和remove()的區(qū)別。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
使用jQuery向asp.net Mvc傳遞復(fù)雜json數(shù)據(jù)-ModelBinder篇
jQuery提供的ajax方法能很方便的實(shí)現(xiàn)客戶端與服務(wù)器的異步交互,在asp.net mvc 框架使用jQuery能很方便地異步獲取提交數(shù)據(jù),給用戶提供更好的體驗(yàn)!2010-05-05
jQuery 1.7.2中g(shù)etAll方法的疑惑分析
2012-05-05
使用jQuery操作HTML的table表格的實(shí)例解析
這篇文章主要介紹了使用jQuery操作HTML的table表格的實(shí)例解析,包括用jQuery獲取表格總行數(shù)的小技巧,需要的朋友可以參考下2016-03-03
jquery簡單實(shí)現(xiàn)外部鏈接用新窗口打開的方法
這篇文章主要介紹了jquery簡單實(shí)現(xiàn)外部鏈接用新窗口打開的方法,涉及jQuery正則匹配http://開頭外部鏈接網(wǎng)址的相關(guān)技巧,需要的朋友可以參考下2015-05-05

