ページは大量の画像を表示する時どのように遅延して画像lyzをロードします.delayLoading.min.js
4696 ワード
1つのページに大量の画像がある場合、ブラウザはこれらの画像を1つずつダウンロードし、すべてダウンロードしてから他の操作を実行しますが、ブラウザ自体のhttpリクエストの最大同時数(通常は2つ、最大は8つ)は、すべての画像がダウンロードされる時間を制限し、ページの速度が遅くなり、ユーザー体験が悪くなります.
良い実践は、ユーザーが下にページをスクロールするときに、画像がユーザーの可視範囲に現れたときに、対応する画像を要求してロードすることです.例えば、タオバオのページなどです.このように、必要に応じて画像をロードすることで、不要な帯域幅の浪費を省くことができます(ユーザーはこのページのすべての画像を閲覧することはできません).同時に、ページに迅速な応答を維持することができます.
実現の原理は簡単で、![]()
タグに対して、まずそのリソースアドレスsrcを書かないでください(ブラウザがこのimgタグにロードすれば、srcが指すピクチャリソースをダウンロードしますので)、そのリソースアドレスを一時的な属性に書くことができます.以下で使用するjs(jsプラグインに相当)の1つの属性originalSrcに書き、ブラウザの現在の表示領域に表示されているかどうかを判断し、表示されたらoriginalSrcが示すリソースアドレスを![]()
ラベルのsrcに書きます.srcが書き込まれるとブラウザはピクチャリソースをダウンロードし,ピクチャの遅延ロードを実現する.
jqueryを使うjsファイルとlyz.delayLoading.min.jsファイル(どなたが書いたのか、勉強しました!)
lyz.delayLoading.min.jsファイルは次のとおりです.
Webページの例:
効果は素晴らしいですね.
良い実践は、ユーザーが下にページをスクロールするときに、画像がユーザーの可視範囲に現れたときに、対応する画像を要求してロードすることです.例えば、タオバオのページなどです.このように、必要に応じて画像をロードすることで、不要な帯域幅の浪費を省くことができます(ユーザーはこのページのすべての画像を閲覧することはできません).同時に、ページに迅速な応答を維持することができます.
実現の原理は簡単で、
jqueryを使うjsファイルとlyz.delayLoading.min.jsファイル(どなたが書いたのか、勉強しました!)
lyz.delayLoading.min.jsファイルは次のとおりです.
/*
* Summary: lyz.delayLoading 1.0
* Date: 2011
* Emial: [email protected]
*/
jQuery.fn.extend({delayLoading:function(a){function g(d){var b,c;if(a.container===undefined||a.container===window){b=$(window).scrollTop();c=$(window).height()+$(window).scrollTop()}else{b=$(a.container).offset().top;c=$(a.container).offset().top+$(a.container).height()}return d.offset().top+d.height()+a.beforehand>=b&&c>=d.offset().top-a.beforehand}function h(d){var b,c;if(a.container===undefined||a.container===window){b=$(window).scrollLeft();c=$(window).width()+$(window).scrollLeft()}else{b=$(a.container).offset().left;
c=$(a.container).offset().left+$(a.container).width()}return d.offset().left+d.width()+a.beforehand>=b&&c>=d.offset().left-a.beforehand}function f(){e.filter("img["+a.imgSrcAttr+"]").each(function(d,b){if($(b).attr(a.imgSrcAttr)!==undefined&&$(b).attr(a.imgSrcAttr)!==null&&$(b).attr(a.imgSrcAttr)!==""&&g($(b))&&h($(b))){var c=new Image;c.onload=function(){$(b).attr("src",c.src);a.duration!==0&&$(b).hide().fadeIn(a.duration);$(b).removeAttr(a.imgSrcAttr);a.success($(b))};c.onerror=function(){$(b).attr("src",
a.errorImg);$(b).removeAttr(a.imgSrcAttr);a.error($(b))};c.src=$(b).attr(a.imgSrcAttr)}})}a=jQuery.extend({defaultImg:"",errorImg:"",imgSrcAttr:"originalSrc",beforehand:0,event:"scroll",duration:"normal",container:window,success:function(){},error:function(){}},a||{});if(a.errorImg===undefined||a.errorImg===null||a.errorImg==="")a.errorImg=a.defaultImg;var e=$(this);if(e.attr("src")===undefined||e.attr("src")===null||e.attr("src")==="")e.attr("src",a.defaultImg);f();$(a.container).bind(a.event,function(){f()})}});
Webページの例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> </title>
<script src="js/jquery-2.1.4.js" type="text/javascript"></script>
<script src="js/lyz.delayLoading.min.js" type="text/javascript"></script>
<style>
#imgBox{
width: 700px;padding: 50px;margin:50px auto;
}
img{
width: 600px;height: 400px;display: block;margin-bottom: 50px;
}
</style>
<script>
$(function () {
$("img").delayLoading({
defaultImg: "images/loading.png", //
errorImg: "", // ( ： defaultImg )
imgSrcAttr: "originalSrc",// ( ：originalSrc， img src originalSrc)
beforehand: 0, // ( ：0)
event: "scroll", // ( ：scroll)
duration: "normal", // ( ) ("slow", "normal", or "fast") ( ：1000), :"normal"
container: window, // ( ：window)
success: function (imgObj) { }, // ( ： )
error: function (imgObj) { } // ( ： )
});
});
</script>
</head>
<body>
<div id="imgBox">
<img originalSrc="images/pic1.jpg">
<img originalSrc="images/pic2.jpg">
<img originalSrc="images/pic3.jpg">
<img originalSrc="images/pic4.jpg">
<img originalSrc="images/lb1.png">
<img originalSrc="images/lb2.png">
<img originalSrc="images/lb3.png">
<img originalSrc="images/lb4.png">
</div>
</body>
</html>効果は素晴らしいですね.