jQueryを使用して画像を非同期に読み込む

jQueryを使用してページに外部画像を非同期で読み込みたいのですが、次のことを試しました。

$.ajax({ 
   url: "http://somedomain.com/image.jpg", 
   timeout:5000,
   success: function() {

   },
   error: function(r,x) {

   }
});

しかし、それは常にエラーを返します、このような画像をロードすることさえ可能ですか？

私は.loadメソッドを使用しようとしましたが、それは機能しますが、画像が利用できない場合にタイムアウトを設定する方法がわかりません（404）。これどうやってするの？

ajaxは必要ありません。新しい画像要素を作成し、そのソース属性を設定して、読み込みが完了したらドキュメントのどこかに配置できます。

var img = $("<img />").attr('src', 'http://somedomain.com/image.jpg')
    .on('load', function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
            alert('broken image!');
        } else {
            $("#something").append(img);
        }
    });

AJAXを使用する必要がある場合...

onloadハンドラーが適切な選択ではなかったユースケースに遭遇しました。私の場合、JavaScript経由で印刷するとき。したがって、これには実際にAJAXスタイルを使用する2つのオプションがあります。

解決策1

Base64画像データとREST画像サービスを使用します。独自のウェブサービスがある場合は、Base64エンコーディングで画像を提供するJSP / PHP RESTスクリプトを追加できます。さて、それはどのように役立ちますか？画像エンコーディングのクールな新しい構文に出くわしました：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhE..."/>

したがって、Ajaxを使用してImage Base64データをロードし、完了時にBase64データ文字列をイメージに構築できます。とても楽しい ：）。画像のエンコードには、このサイトhttp://www.freeformatter.com/base64-encoder.htmlを使用することをお勧めします。

$.ajax({ 
    url : 'BASE64_IMAGE_REST_URL', 
    processData : false,
}).always(function(b64data){
    $("#IMAGE_ID").attr("src", "data:image/png;base64,"+b64data);
});

Solution2：

ブラウザをだましてキャッシュを使用させます。これにより、リソースがブラウザーのキャッシュにあるときに、素晴らしいfadeIn（）が得られます。

var url = 'IMAGE_URL';
$.ajax({ 
    url : url, 
    cache: true,
    processData : false,
}).always(function(){
    $("#IMAGE_ID").attr("src", url).fadeIn();
});   

ただし、どちらの方法にも欠点があります。最初の方法は最新のブラウザでのみ機能します。2つ目はパフォーマンスに問題があり、キャッシュの使用方法を前提としています。

乾杯、

jQueryを使用すると、「src」属性を「data-src」に変更できます。画像は読み込まれません。ただし、場所はタグとともに保存されます。どちらがいいですか。

<img class="loadlater" data-src="path/to/image.ext"/>

jQueryの単純な部分がdata-srcをsrcにコピーし、必要なときにイメージのロードを開始します。私の場合、ページの読み込みが完了したとき。

$(document).ready(function(){
    $(".loadlater").each(function(index, element){
        $(element).attr("src", $(element).attr("data-src"));
    });
});

jQueryコードは省略できるかもしれませんが、この方法で理解できます。

$(<img />).attr('src','http://somedomain.com/image.jpg');

ギャラリーで写真のリストをループしている場合、画像がすでにキャッシュにある場合、サーバーに別のリクエストを送信しないため、ajaxよりも優れているはずです。jQuery / ajaxの場合はリクエストし、HTTP 304（変更されていない）を返し、キャッシュにある元の画像がすでに存在する場合はそれを使用します。上記の方法は、ギャラリー内の画像の最初のループの後、サーバーへの空のリクエストを減らします。

ASYNCのロードにDeferredオブジェクトを使用できます。

function load_img_async(source) {
    return $.Deferred (function (task) {
        var image = new Image();
        image.onload = function () {task.resolve(image);}
        image.onerror = function () {task.reject();}
        image.src=source;
    }).promise();
}

$.when(load_img_async(IMAGE_URL)).done(function (image) {
    $(#id).empty().append(image);
});

注意してください：キャッシュの問題を防ぐために、image.onloadはimage.srcの前になければなりません。

画像のソースを設定したいだけならこれを使うことができます。

$("img").attr('src','http://somedomain.com/image.jpg');

これも動作します。

var image = new Image();
image.src = 'image url';
image.onload = function(e){
  // functionalities on load
}
$("#img-container").append(image);

私の知る限り、ここでは.ajax（）のように.load（）関数を実行する必要がありますが、jQuery setTimeoutを使用してそれをライブに保つことができます（ish）

<script>
 $(document).ready(function() {
 $.ajaxSetup({
    cache: false
});
 $("#placeholder").load("PATH TO IMAGE");
   var refreshId = setInterval(function() {
      $("#placeholder").load("PATH TO IMAGE");
   }, 500);
});
</script>

.loadを使用してイメージをロードします。エラー（404としましょう）が発生するかどうかをテストするには、次のようにします。

$("#img_id").error(function(){
  //$(this).hide();
  //alert("img not loaded");
  //some action you whant here
});

注意-画像のsrc属性が空の場合、.error（）イベントはトリガーされません。

$（関数（）{

    if ($('#hdnFromGLMS')[0].value == 'MB9262') {
        $('.clr').append('<img src="~/Images/CDAB_london.jpg">');
    }
    else
    {
        $('.clr').css("display", "none");
        $('#imgIreland').css("display", "block");
        $('.clrIrland').append('<img src="~/Images/Ireland-v1.jpg">');
    }
});