jquery_jquery に基づく autoIMG 画像適応プラグイン コード

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

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

// jQuery.autoIMG.js v0.2
// Tang Bin - http://planeArt.cn/ - MIT ライセンス
(function ($) {
var //読み込みステータスの代替画像を設定します
tempPath = './images/loading.png',
// 読み込みエラーの代替画像を設定します
errorPath = './images/error.png',
// css2.1 max-width 属性がサポートされているかどうかを確認します
isMaxWidth = 'maxWidth' in document.documentElement.style,
// IE7 ブラウザがサポートされているかどうかを確認します
isIE7 = !- [1,] && ! (画像内の 'プロトタイプ') && isMaxWidth;
new Image().src = tempPath;
var $this = this,
// コンテナの幅を取得します
maxWidth = $this.width();
return $this.find('img').each(function (i, img) {
// if を使用しますmax-width 属性がサポートされています。それ以外の場合は、次のプリロード メソッドを使用します。
if (isMaxWidth) return img.style.maxWidth = maxWidth 'px';
var path = img.getAttribute('data-src') || img.src,
next = img.nextSibling,
parent = img.parentNode,
temp = new Image()
// img イメージを削除し、読み込み中のイメージに置き換えます
img.style.display = 'none';
img.parentNode.removeChild(img);
temp.src = tempPath; .insertBefore(temp) :parent .appendChild(temp);
// 画像サイズが実行可能になりました
imgReady(path, function (width, height) {
if (width > maxWidth) {
// 比例的に拡大縮小します
height = maxWidth / width * height,
width = maxWidth;
//読み込み中の画像を削除します
temp.parentNode.removeChild(temp);調整した元の画像を復元します
img.style.display = '';
img.style.height = height 'px'; setAttribute('src', path );
next ? next.insertBefore(img) :
}, function () {
// 読み込みエラー
temp.src = errorPath ;
temp.title = '画像読み込みエラー!';
});
}; 、プライベート属性を使用して、三次補間を通じてそれを解決します
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); >// 画像ヘッダーのサイズ データを取得します
// http://www.planeart.cn/?p=1121
// @param {String} 画像パス
// @param { Function} サイズを取得するコールバック関数 (パラメータ 1 は幅を受け取り、パラメータ 2 は高さを受け取ります)
// @param {Function} 読み込みエラー コールバック関数 (オプション)
var imgReady = function (url, callback, error) {
var width、height、offsetWidth、offsetHeight、intervalId、check、div、
accuracy = 1024、
doc = document、
container = doc.body ('head' )[0],
img = new Image();
img.src = url;
// 画像がキャッシュされている場合は、キャッシュされたデータを直接返します
if (img.complete) {
return callback(img.width, img. height);
};
// シークレット画像をページに挿入し、画像サイズの準備状況を監視します
if (container) {
div = doc.createElement('div');
div .style.cssText = 'visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden';
div.appendChild(img)
container.appendChild (div);
width = img.offsetHeight;
check = function () {
offsetWidth = img.offsetWidth;
offsetHeight = img.offsetHeight;
// 画像のサイズが変化し始めたら、ブラウザが画像ヘッダー データを取得して占有したことを意味します
// 実際のテスト後、 img.offsetWidth の監視のみが有効であり、img.offsetHeight の検出は保険のためです
/ / 新しく挿入された画像の領域がプリセット サイズよりも大きい場合、画像は実行前に別の場所に読み込まれている可能性がありますWebkit ベースのブラウザなど
if (offsetWidth !== width || offsetHeight !== height || offsetWidth * offsetHeight > precision) {
clearInterval(intervalId);
callback(offsetWidth, offsetHeight);
// IE のメモリ リークを回避するために img イベントと要素をクリアします。
div.innerHTML = ''; 🎜>};
};
check();
// 定期的に検出を実行します
interval(check, 150);
// これは保険操作です。上記のサイズ監視方法が失敗した場合、これが有効になります
// 非常に小さい画像の読み込み時間が検出間隔より短い可能性がある場合タイマーで定義されている場合、タイマーは停止します
img.onload = function () {
callback(img.width, img.height);
img.onload = img.onerror = null; >clearInterval(intervalId);
container && img.parentNode.removeChild(img);
// 画像読み込みエラー
img.onerror = function () {
エラー && エラー();
clearInterval(intervalId);
};

;
autoIMG 圧縮: 1.74kb、互換性: Chrome | Sifari | IE7 |
デモを呼び出します: $('#demo p') | , 嬉しいDEMOのアドレスはこちら：
http://demo.jb51.net/js/2011/autoimg/追記：前回の記事でimgReady技術の伏線はありましたが、私はこう思いました。この画像適応プラグインを実装するのは非常に簡単ですが、その過程で Webkit ベースのブラウザで問題が発生しました。その後、Webkit には修正されていないバグがあることがわかりました。 imgReady関数を更新しました。

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