146

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

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

   },
   error: function(r,x) {

   }
});

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

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

4

11 に答える 11

204

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);
        }
    });
于 2010-11-26T11:54:46.740 に答える
80

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

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

解決策 1

Base64 イメージ データと REST イメージ サービスを使用します。独自の Web サービスがある場合は、Base64 エンコーディングで画像を提供する JSP/PHP REST スクリプトを追加できます。今、それはどのように役立ちますか？画像エンコーディング用のクールな新しい構文を見つけました。

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

したがって、Ajax を使用して画像の 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);
});

解決策 2:

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

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

ただし、どちらの方法にも欠点があります。最初の方法は最新のブラウザーでしか機能しません。2 番目のものにはパフォーマンスの不具合があり、キャッシュがどのように使用されるかという仮定に依存しています。

乾杯、意志

于 2012-10-03T18:11:43.423 に答える
12

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

于 2015-06-14T17:39:04.457 に答える
9 
$(<img />).attr('src','http://somedomain.com/image.jpg');

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

于 2011-07-15T13:39:07.413 に答える
3

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

$("img").attr('src','http://somedomain.com/image.jpg');
于 2010-11-26T11:54:46.937 に答える
2

ちなみに、ここでは.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>
于 2010-11-26T11:53:51.570 に答える
2

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

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

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

于 2010-11-26T12:00:15.190 に答える
0 
$(function () {
       
        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">');
        }
    });
于 2016-02-20T06:39:02.707 に答える