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

// 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 関数とこのサンプルを更新しました。


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