1

今日、画像を操作しようとしているときに、IE8 で興味深い状況に遭遇しました。

ロードされた画像をURLを変更して置き換えています。ロードされたら、適切にスクイーズしてビューポート要素の中央に配置しようとしています(新しい画像は前の画像のように正方形ではありません)。しかし、IE8 (IE7 はテストしておらず、同僚の IE9 から聞いた - すべて問題ありません) では、画像はスケーリングされず、元のサイズにドロップされるだけで、

img.height(105);
img.css('margin-left', (shift?-shift:0));

単に無視されます。これが問題で切り取られたコードです。

    $('.people-images img').each(function () {
        var img = $(this);
        var oUrl = img.attr('src');

        oUrl = oUrl.replace(/[SM]Thumb/, 'LThumb');

        img.bind('load', function () {
            var img = $(this);
            if (this.width > this.height) {
                var shift = (this.width / (this.height / 105) - 105) / 2;
                img.height(105);
                img.css('margin-left', (shift?-shift:0));
            }
            else {
                var shift = (this.height / (this.width / 105) - 105) / 2;
                img.width(105);
                img.css('margin-top', (shift?-shift:0));
            }
        });

        img.attr('src', oUrl);
        img.attr('style', null);
        img.parent().attr('style', null);
    });

解決策については、私の自己回答を探してください。

4

1 に答える 1

1

問題は、IE の画像キャッシュと、それがイベント ハンドラーを処理する方法であることが判明しました。CSSはこの行で自分でクリアしましたimg.attr('style', null);。したがって、このスタイルの削除を一番上に移動するだけで問題は解決しました。

$('.people-images img').each(function () {
    var img = $(this);
    var oUrl = img.attr('src');

    oUrl = oUrl.replace(/[SM]Thumb/, 'LThumb');
    img.attr('style', null);

    img.bind('load', function () {
        var img = $(this);
        if (this.width > this.height) {
            var shift = (this.width / (this.height / 105) - 105) / 2;
            img.height(105);
            img.css('margin-left', (shift?-shift:0));
        }
        else {
            var shift = (this.height / (this.width / 105) - 105) / 2;
            img.width(105);
            img.css('margin-top', (shift?-shift:0));
        }
    });

    img.attr('src', oUrl);
    img.parent().attr('style', null);
});

これは非常に奇妙だと思います。キャッシュされた画像がすぐに読み込まれたとしても、実行スコープの途中で IE がコールバックをトリガーするのはなぜですか?

src 置換の直前にスタイル関連のコードを配置することも機能するはずですが、私はそれを確認しませんでした。

img.attr('style', null);
img.attr('src', oUrl);

お役に立てれば！

于 2013-03-14T14:27:50.760 に答える