AJAXの代わりにイメージをリクエストするのにこのメソッドはどれくらい悪いですか？

Question

私はサムネイル画像リストを持っています。それらはすべて同じ画像のソースである 'rel'の属性を持っています。私の機能は単純です。サムネイル画像をクリックすると、サムネイル画像の大きなサイズがコンテナに読み込まれます。私があなたのフィードバックを必要とする私のコードの興味深い部分は、このです：

変数：

「event.data.cImg」私は 「イベントを更新するコンテナで大きな画像です.data.cImgWrap $（この）」大きな画像 のコンテナである 『』

event.data.cImg.attr('src', $(this).attr("rel")); 

    if (event.data.cImg.complete != 'true') { 

     event.data.cImgWrap.css('opacity', '0.7'); 

     event.data.cImg.load(function() { 
      event.data.cImgWrap.css('opacity', '1'); 
     }); 
    } 

をクリックされたサムネイル画像は、だから私のコードの欠点は何ですか？

私の英語は申し訳ありませんが、私はネイティブスピーカーではなく、事前に感謝しています！

Answer 1

イメージがbase64でエンコードされたデータとしてデータベースに直接格納されていない限り（ブラウザのすべてのサポートデータのURLではなく）、イメージをロードするためにajaxを使用する理由の1つは考えられません。 DOMにはイメージローディングを「監視」するために必要なものがすべてあります。そのため、イメージを取得するためにajaxを使用するポイントは何ですか？シンプルなGET httpリクエストがそのトリックを行います。

あなたはajaxを使用する唯一のことは、webservice ... のように、画像のリストからtitleなどの画像URLとメタデータを取得していることです。完全なイベントはどこでもサポートされていません。

Answer 2

すべてのブラウザが画像のcompleteプロパティをサポートしているわけではありません。

ハンドラとopacityを設定してからsrcを変更することをおすすめします。次に、srcを変更します。イメージがすでにキャッシュに入っている場合は、loadイベントが直ちに発生し、不透明度を1に戻します。すべてがうまくいけば、画面が更新されるよりも速く起こるので、ユーザーは不透明度の変更を見ることができません。