既にページ上にある画像の読み込み順序を変更する

Question

ページ上の画像の読み込み順序を変更するAJAXのない方法がありますか？または既に存在するイメージの読み込みを完全に停止または一時停止する方法さえありますか？

ユースケースはシンプルです - 私はページの下に長いイメージリストを持ち、訪問者は実際のコンテナを参照するURLアンカー（/イメージの真ん中）を使用してページの別の場所に上陸しますそれらの画像のために。

少なくとも、要求されたコンテナFIRST内にイメージをロードしてから、残りのイメージをロードし続けたいと思います。

ページDOMをロードする前に、要求されたコンテナイメージのイメージパスを知る方法がないという難点があります。

Javascriptの新しいImage（）技法を使用してコンテナのimgコンテンツを取得しようとしましたが、ページ上のその画像が以前のすべての画像が読み込まれるのを待っているという事実は変わりません。

私はまた、上記のimgパスの背景イメージ（CSS）でbodyのdivを直前に追加しようとしましたが、これは画像の読み込みにも優先順位を付けません。

他のアイデアはありますか？

Answer 1

あなたはすなわち

<img src="" mysrc="[real image url here]" /> 

それとも、デフォルトでは「ロード中...」の画像を表示する画像を作ることができ、空のIMGのプレースホルダとDOMを持っている必要があります。いくつかのカスタムタグmysrcなどで実際の画像のURLをキャッシュすることもできます。あなたが表示したい正確に何の画像を知ったら、次に（とどのような順番で）あなたはこのことができます願ってい

var images = [];//array of images to show from start and in proper order 
function step(i){ 
    var img = images[i++]; 
    img.onload = function(){ 
    step(i); 
    } 
    img.src = "[some url here]" 
} 

画像読み込みのシーケンスを構築する必要があります。関心を

Answer 2

が、これは私がここでの回答に基づいて実装することになった機能です（私はそれに最適なスピードのためのオンデマンド・ローディング機能製）：

function loadImage(img) { // NEED ALTERNATE METHOD FOR USERS w/o JAVASCRIPT! Otherwise, they won't see any images. 

     //var img = new Image(); // Use only if constructing new <img> element 

     var src = img.attr('alt'); // Find stored img path in 'alt' element 

     if(src != 'loaded') { 

      img 

      .load(function() { 
       $(this).css('visibility','visible').hide().fadeIn(200); // Hide image until loaded, then fade in 
       $(this).parents('div:first').css('background','none'); // Remove background ajax spinner 
       $(this).attr('alt', 'loaded'); // Skip this function next time 
       // alert('Done loading!'); 
      }) 

      .error(function() { 
       alert("Couldn't load image! Please contact an administrator."); 
       $(this).parents('div:first').find("a").prepend("<p>We couldn't find the image, but you can try clicking here to view the image(s).</p>"); 
       $(this).parents('div:first').css('background','none'); 
      }) 

      .attr('src', src); 
     } 
    }