ホームページ >ウェブフロントエンド >jsチュートリアル >JQuery 画像の遅延読み込みと比例スケーリング plug-in_jquery

JQuery 画像の遅延読み込みと比例スケーリング plug-in_jquery

WBOY
WBOYオリジナル
2016-05-16 18:42:10895ブラウズ

最近JS OOPを勉強しているので、こんな感じで書きました
使い方:
$(".viewArea img").zoom({height:74,width:103});効果のデモ:

http://demo.jb51.net/html/jquery_img/jquery_img.htm
コード:

コピーcode コードは次のとおりです:
(function($){
$.fn.zoom = function(settings){
//いくつかのデフォルト設定;
settings = $.extend({
height:0,
width:0,
loading:"lightbox-ico-loading.gif"
},settings);
var イメージ = this ;
$(images).hide();
varloading = new Image();
loading.className="loading"
loading.src = 設定。読み込み;
$(images).after(loading);
//プリロード
var preLoad = function($this){
var img = new Image(); = $this.src;
if (img.complete) {
processImg.call($this);
}
//$this.src; //エラーが発生します
img.onload = function(){
//$this.src = this.src; //間違ったサイズが取得されます
processImg.call ($this);
img .onload=function(){};
}
}
//画像サイズを計算します。
function processImg(){
//if( settings.height===0|| settings.width ===0) return;
var m = this.height-settings.height;
var n = this.width - settings.width; if(m>n)
this.height = this.height>settings.height ? settings.height :
else
this.width = this.width >settings. width ? settings.width :
this.width;
$(this).next(".loadding").remove()
$(this).show(); >return $(images).each(function(){
preLoad(this);
})
}
})(jQuery);効果は次のとおりです:

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。