HTML、画像の複数のsrc属性を並列に設定する方法、最速の勝利

画像を非同期にダウンロードしたいので、最初のユーザーには低解像度の画像が表示され、高解像度のバージョンは背景にダウンロードされます。私は以下を試した。HTML、画像の複数のsrc属性を並列に設定する方法、最速の勝利

<html> 
    <head> 
     <script> 
      window.addEventListener('load', function() { 
       var kuvaEl = document.getElementById('kuva'); 

       var r_src = kuvaEl.getAttribute('r-src'); 
       var a_src = kuvaEl.getAttribute('a-src'); 

       kuvaEl.setAttribute('src', r_src); 
       kuvaEl.setAttribute('src', a_src); 
      }); 
     </script> 
    </head> 
    <body> 
     <img id="kuva" src="http://www.viikonloppu.com/wp-content/uploads/2014/04/lotoflaughters.com_-619x428.jpg?c3bc1b" 
      a-src="https://www.manitowoccranes.com/~/media/Images/news/2014/Potain-China-hi-res.jpg" 
      r-src="http://fuzyll.com/images/2016/angel_oak_panorama.jpg" /> 
    </body> 
</html>

しかし、問題はsrcが二時間を変更する場合r_srcダウンロードが中止されています。これらのイメージを両方とも並行してダウンロードし、r_srcを最初に表示します（a_srcよりも速くダウンロードする場合のみ）。* a_src *の準備ができたら、a_srcと表示してください。

また、それが実際に変更されsrc前に、ブラウザのキャッシュにこれらのr_src a_srcと画像をダウンロードすることは可能でしょうか？理想的には、srcの変更をキャッシュからイメージを取得するか、そのURLの保留中のダウンロードに参加させることができます。

jQueryも使用できます。 IE7は実装をサポートする必要があります。

出典

2017-10-11 Tuomas Toivonen

AJAXをお試しになりましたか？画像を低解像度のsrcでロードし、次にAJAX高解像度の画像でロードし、画像のsrc値を置き換えます。 –

3つの画像を使用するのはちょっと残酷に思えるかもしれませんが、おそらく非常に遅くなります。 Facebookが使用している[このアプローチ]（https://css-tricks.com/the-blur-up-technique-for-loading-background-images/）を試すことができます。 –

3つの画像を使用する理由は、常に低い解像度である小さな画像があることです。小さな画像をクリックすると、大きな画像が最初に低解像度、高解像度が利用可能な場合には更新されます。サンプルコードはこのロジックに従わず、単なるテストです –

javascriptまたはjqueryを使用して、同じ画像の2つのバージョンをロードするだけで済みます。最初はあなたの低解像度ですが、あなたは隠されたimgタグの中に高解像度をダウンロードします。

ダウンロードが完了したら、低解像度画像を隠す/削除して高解像度を表示するだけです。

このリンクはいくつかのテストを示しており、それを行う方法はほとんどありません。そして、それはie7をサポートする必要がありますLoad a low-res background image first, then a high-res one

出典

2017-10-11 08:01:16 sheplu

デフォルトのsrcとしてあなたの低解像度を置く必要があります。その後JSを使用して高解像度版をダウンロードし、ダウンロードが完了したらイメージsrcを変更します。

また、良い習慣は、あなたが本当に並列ダウンロードをしたい場合は、「DOMContentLoaded」イベントのために「ロード」イベントを交換する必要があり、カスタムのためのデータ - *は

を属性を使用することです。ただし、これにより、ユーザーがページが準備できるまで待つ必要がある時間が長くなります。あなたのあなたがinterlaced progressive JPEG format.

このメソッドを使用することができます（スクリプトやスタイルシート）

window.addEventListener('load', function() { 
 
    // get all images 
 
    let images = document.getElementsByClassName("toHighRes"); 
 
    // for each images, do the background loading 
 
    for (let i = 0; i < images.length; i++) { 
 
    InitHighResLoading(images[i]); 
 
    } 
 
}); 
 

 
function InitHighResLoading(image) { 
 
    let hrSrc = image.dataset["hr"]; 
 
    let img = new Image(); 
 
    img.onload =() => { 
 
    // callback when image is loaded 
 
    image.src = hrSrc; 
 
    } 
 
    // launch download 
 
    img.src = hrSrc; 
 
}

img { 
 
/* only for code snippet */ 
 
    max-height: 300px; 
 
}

<img class="toHighRes" 
 
    data-hr="https://www.manitowoccranes.com/~/media/Images/news/2014/Potain-China-hi-res.jpg" 
 
    src="http://fuzyll.com/images/2016/angel_oak_panorama.jpg" />

出典

2017-10-11 08:09:49 Apolo

をロードする重要な資産の優先順位を決定するために、ロードイベントを保持しなければならないことは、高品質の画像を処理するための好ましい方法であると持っています非常に多くのウェブサイトによって実装されています。イメージの圧縮は、受信者が画像をより細かく詳細に取得するときに、データの送信が進むように行われます。

あなたがabouve技術を使用したいいけない場合

は、画像のSRCにおける低品質のイメージを持っています。ページ全体が正常に読み込まれたら、低品質の画像を高品質の画像に変更してください。

<img id="target-image" src="low-quality.jpg" data-src="high-quality.jpg" /> 

$(window).load(function(){ 
    var imgSrc = $('#target-image').data('src'); 
    $('#target-image').attr('src',imgSrc); 
});

出典

2017-10-11 08:10:05 codegeek

HTML、画像の複数のsrc属性を並列に設定する方法、最速の勝利

答えて

関連する問題