/*
******* *** ****画像プリロード プラグイン*****************
///作成者: Wu Jian (2008-06-23)
// /http://regedit.cnblogs.com
///説明: 画像をロードする前にロードサインを表示し、画像をダウンロードした後に画像を表示します
画像を自動的にズームできます
このプラグインを使用すると、最初にページを読み込み、後で画像を読み込むことができます。
画像を表示した後に拡大する前にレイアウトを展開する必要がある問題を解決します。
/ /パラメータ設定:
スケーリング 自動的に均等な比率で拡大縮小するかどうか
width 画像の最大高さ
height 画像の最大幅
読み込み画像のloadpicパス
*/
jQuery.fn.LoadImage=function(scaling,width ,height,loadpic){
if(loadpic==null)loadpic="load3.gif";
return this.each(function(){
var t=$(this);
var src=$(this).attr("src")
var img=new Image();
//alert("Loading")
img.src=src;
// 画像を自動的に拡大縮小します
var autoScaling=function(){
if(scaling){
if(img.width>0 && img.height> 0){
if(img.width /img.height>=width/height){
if(img.width>width){
t.width(width); ((img.height*width)/img.width);
t.width(img.width)
t.height(img.height); >}
else{
if (img.height>height){
t.height(height);
t.width((img.width*height)/img.height); 🎜>}else{
t.width (img.width);
t.height(img.height)
}
}
}
}
//画像のキャッシュ処理時に自動的に読み込まれます
if(img.complete){
//alert("getToCache!");
autoScaling(); 🎜>}
$(this).attr ("src","");
varloading=$("
");
t.after(loading);
$(img).load(function(){
autoScaling();
loading.remove();
t.attr("src",this.src);
//alert("やっと!")
} );
}) ;
}
使用説明:
$("div img").LoadImage(true,120,90); >効果は次のとおりです:
テストアドレス
http://img.jb51.net/online/jqueryLoadImage/demo.htm
ファイルパッケージのダウンロード