web-dev-qa-db-ja.com

jQueryを使用して画像を非同期にロードする

jQueryを使用してページに外部イメージを非同期にロードしたいのですが、次のことを試しました。

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

   },
   error: function(r,x) {

   }
});

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

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

javascriptjqueryajaximagejquery-load
136
Arief

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);
        }
    });
194
karim79

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

Onloadハンドラーが適切な選択ではないユースケースに出くわしました。私の場合、javascript経由で印刷します。このため、実際にAJAXスタイルを使用する2つのオプションがあります。

ソリューション1

Base64イメージデータとRESTイメージサービスを使用します。独自のWebサービスがある場合は、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：

ブラウザをuseしてキャッシュを使用させます。これにより、リソースがブラウザーのキャッシュにあるときにNice fadeIn（）が提供されます。

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

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

乾杯、意志

73
mschmoock

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

<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コードは省略できると思いますが、このように理解できます。

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

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

8
Jaseem

ASYNCロードには、遅延オブジェクトを使用できます。

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の前になければなりません。

4
phpcoding

画像のソースを設定するだけの場合は、これを使用できます。

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

これも機能します..

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

知る限りでは、ここで.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>
2
benhowdle89

.loadを使用して画像を読み込みます。エラーが発生したかどうかをテストするには（たとえば404）、次のようにします。

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

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

2
Poelinca Dorin

$（関数（）{

    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">');
    }
});
0
MadhaviLatha Bathini