0 
<script type="text/javascript">
jQuery(document).ready(function(){
setTimeout(function(){
    jQuery('.my-image').each(function(){
        jQuery(this).greyScale({
            fadeTime: 200,
            reverse: false
        });
        $(this).animate({ 'opacity' : 1 }, 1000);
        $(this).load(function(){
            jQuery(this).greyScale({
                fadeTime: 200,
                reverse: false
            });
            $(this).animate({ 'opacity' : 1 }, 1000);
        });
    });
}, 200);
});
</script>

上記の例では、画像をキャンバスに複製し、両方のバージョンを保持する grayScale() 関数を使用しています (灰色 = デフォルト、色 = ホバー)。

99% の確率で正常に動作しますが、ブラウザを最初に実行したときに、1 つの画像、2 つの画像、またはそのようなものの読み込みに失敗することがあります。「ロード」と「通常のイベント」の両方が機能しなかったようです。

私がそれを正しく行っているかどうか誰かが確認できますか? 画像が既に存在する場合、または画像が存在しない場合は、代替の「load()」を使用して、ロード後に確実に実行されるように、そのイベントをロードしようとします。論理的には、それは良い解決策のようです。

4

3 に答える 3

2

画像が読み込まれたかどうかをテストする良い方法は、画像のサイズにアクセスしてみることです。画像の高さまたは幅を取得できる場合は、画像が読み込まれたと見なしてグレースケールすることができます。したがって、これを行うためにコードを変更できます。

jQuery('.my-image').each(function()
{
    var greyscale = function(image)
    {
        jQuery(image).greyScale({
            fadeTime: 200,
            reverse: false
        });
    }

    if ( jQuery(this).width() )
    {
        // it's loaded, greyscale its ass
        greyscale( this );
    }
    else
    {
        // wait for the load
        $(this).load(greyscale);
    }
});

この状況では、最初に画像をグレースケールにしたいので、プログラムで画像を挿入することをお勧めします。

タグがある場所で、属性を追加するタグ<img>に置き換えます。これには、画像のURLが含まれます。<div>data-src

ドキュメントが読み込まれたら、すべてのタグを調べてタグ内に<div>タグを挿入するスクリプトを使用します。次に例を示します。<img><div>

jQuery('div.my-image').each(function()
{
    var el = jQuery( this );

    // get the src for the image
    var src = el.data( 'src' );

    // start loading the image
    var img = new Image();

    img.onload = function()
    {
        // greyscale it
        jQuery(img).greyScale({
            fadeTime: 200,
            reverse: false
        });

        // append it
        el.append( img );
    }

    // load the image by setting the src
    img.src = src;
});
于 2012-06-25T08:09:27.197 に答える
1

.load()画像の機能に依存しないでください。

jQueryでさえそう言っています。

画像で使用する場合のロードイベントの警告

開発者が.load（）ショートカットを使用して解決しようとする一般的な課題は、画像（または画像のコレクション）が完全に読み込まれたときに関数を実行することです。これには、注意すべきいくつかの既知の警告があります。これらは：

一貫性も信頼性もありませんクロスブラウザ画像のsrcが以前と同じsrcに設定されていると、WebKitで正しく起動されませんDOMツリーが正しくバブルされませんすでに存在する画像の起動を停止できますブラウザのキャッシュ内

ここを読む

可能であれば、これを使用してください

$(window).load(function(){
    // Images are now loaded for sure
})

編集：

または、Paulilishの非常に軽量なjQueryプラグインを使用します

imageLoaded

于 2012-06-25T08:10:24.923 に答える
1

.load()トリッキーなものになる可能性がありますが、次のようなものが機能するはずです ( this.complete チェックに注意してください):

jQuery('.my-image').each(function(){
    $(this).load(function(){
        jQuery(this).greyScale({
            fadeTime: 200,
            reverse: false
        });
        $(this).animate({ 'opacity' : 1 }, 1000);
    });

    if (this.complete) {
      $(this).trigger('load');
    }
});

コードの重複は避けるようにしてください。これは最善の方法ではありません。

于 2012-06-25T07:59:13.657 に答える