大きな画像がページを壊すのを防ぐための jquery に基づく実装コード (即時スケーリング)_jquery

画像がレイアウトを壊さないようにするための最も一般的な方法は、onload 後に画像のサイズを取得して調整することですが、それでも読み込みプロセス中に画像が壊れてしまいます。ここで Qzone ログの画像が改善され、onload 完了後に元の画像が表示されるようになります。以前に onload を使用した小さな例を書きました: http://www.planeart.cn/?p=1022

imgReady を使用すると、img のロードを待たずに dom Ready でクロスブラウザーの画像適応を実現できます。 . 、コードは次のとおりです:
(3-17 は netizencrossyou によって指摘されたエラーを修正し、新しいバージョンでは置換画像が削除されます)

コードをコピー コードは次のとおりです:

// jquery.autoIMG.js - 2010-04-02 - Tang Bin - http://planeArt.cn/ - MIT ライセンス
(function ( $) {
// css2.1 max-width 属性がサポートされているかどうかを確認します
var isMaxWidth = 'maxWidth' in document.documentElement.style,
// 確認しますIE7 ブラウザがサポートされているかどうか
isIE7 = ! -[1,] && !('prototype' in Image) && isMaxWidth;

$.fn.autoIMG = function () {
var maxWidth = this.width();

return this.find('img').each(function (i, img) {
// max-width 属性がサポートされている場合はこれを使用し、そうでない場合はこれを使用します。次のメソッドを使用します
if (isMaxWidth) return img.style .maxWidth = maxWidth 'px';
var src = img.src;

// 元の画像を非表示にします
img.style .display = 'none';
img.removeAttribute(' src');

// 画像ヘッダーサイズデータ取得後すぐに画像を調整
imgReady(src, function (width, height) ) {
// サイズを比例的に縮小します
if (width > ; maxWidth) {
height = maxWidth / width * height,
width = maxWidth = width; 'px';
img.style.height = height 'px';
//元の画像を表示します
img.style.display = ''; 'src', src);
});

})
};

}// プライベート属性を使用して問題を解決します。三次補間
isIE7 && (function (c,d,s) {s=d.createElement ('style');d.getElementsByTagName('head')[0].appendChild(s);s.styleSheet&&(s) .styleSheet.cssText =c)||s.appendChild(d.createTextNode(c))}) ('img {-ms-interpolation-mode:bicubic}',document); 🎝>*/
var imgReady = (function () {
var list = [ ], intervalId = null,

// キューの実行に使用されます
tick = function () {
var i = 0;
for (; i list[i].end ? list.splice(i--, 1) : list[i]() ;
};
!list.length && stop();
} ,

// すべてのタイマーキューを停止します
stop = function () {
clearInterval(intervalId) );
intervalId = null;

戻り関数 (url、ready、load、error) {
var check、width、height、newHeight、
img = new Image();

img.src = url;

// 画像がキャッシュされている場合は、キャッシュされたデータを直接返します
if (img.complete) {
read(img.width, img.height);
load &&load(img.width, img.height)

}; 🎜>width = img.width;
height = img.height;
newWidth = img.height; !== width || newHeight !== height ||
// 画像に領域検出がある場合は、他の場所でロードするときに使用できます
newWidth * newHeight > , newHeight);
check.end = true;
} ;

// 読み込みエラー後のイベント
() {
error && error();
img = img.onload = img.onerror = null;

;ロードされたイベント
img.onload = function () {
load &&load (img.width, img.height)
!check.end && check(); onload をループ内で実行します。onload は空白のままにしてください
img = img.onload = img .onerror = null
} // キューに追加して定期的に実行します
if ( !check.end) {
list.push(check);
// ブラウザーのパフォーマンスの低下を軽減するために、表示できるタイマーは 1 つだけです
if (intervalId === null) intervalId = setInterval (ティック、40);
})( )(

);
autoIMG 圧縮: 1.74kb、互換性: Chrome | Sifari | IE7 |

デモを呼び出す | 🎜 >
同様に、楽しい DEMO アドレスは次のとおりです:
http://demo.jb51.net/js/2011/autoimg/
追記: 前回のこの記事と同様ですがimgReady テクノロジーへの道を切り開いたので、この画像アダプティブ プラグインの実装は非常に簡単だと思いましたが、その過程で Webkit ベースのブラウザに問題が発生しました。後で、Webkit にはまだ存在しないバグがあることがわかりました。修正され、WebKit の画像ダウンロードが中断できなくなりました。長い間苦労した後、imgReady 関数とこのサンプルを更新しました。


パッケージのダウンロード アドレス