web-dev-qa-db-de.com

Laden Sie Bilder asynchron mit jQuery

Ich möchte externe Bilder mit jQuery asynchron auf meine Seite laden und habe Folgendes versucht:

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

   },
   error: function(r,x) {

   }
});

Aber es wird immer ein Fehler zurückgegeben. Ist es überhaupt möglich, ein Bild wie dieses zu laden?

Ich habe versucht, .load Methode und es funktioniert, aber ich habe keine Ahnung, wie ich eine Zeitüberschreitung einstellen kann, wenn das Bild nicht verfügbar ist (404). Wie kann ich das machen?

139
Arief

Keine Notwendigkeit für Ajax. Sie können ein neues Bildelement erstellen, sein Quellattribut festlegen und es nach dem Laden an einer beliebigen Stelle im Dokument platzieren:

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

WENN SIE AJAX WIRKLICH BENÖTIGEN ...

Ich bin auf Fälle gestoßen, in denen die Onload-Handler nicht die richtige Wahl waren. In meinem Fall beim Drucken über Javascript. Es gibt also zwei Optionen, um den AJAX -Stil dafür zu verwenden:

Lösung 1

Verwenden Sie Base64-Image-Daten und einen REST Image-Service. Wenn Sie einen eigenen Webservice haben, können Sie ein JSP/PHP REST Script hinzufügen, das Images in Base64-Codierung anbietet Nun, wie nützlich ist das? Ich bin auf eine coole neue Syntax für die Bildkodierung gestoßen:

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

Sie können also die Image Base64-Daten mit Ajax laden und anschließend die Base64-Datenzeichenfolge für das Image erstellen! Viel Spaß :). Ich empfehle, diese Site http://www.freeformatter.com/base64-encoder.html für die Bildkodierung zu verwenden.

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

Lösung 2:

Trick den Browser, um seinen Cache zu verwenden. Dies gibt Ihnen ein Nice fadeIn (), wenn sich die Ressource im Browser-Cache befindet:

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

Beide Methoden haben jedoch ihre Nachteile: Die erste funktioniert nur in modernen Browsern. Der zweite hat Leistungsprobleme und basiert auf der Annahme, wie der Cache verwendet wird.

prost, wird

76
mschmoock

Mit jQuery können Sie einfach das Attribut "src" in "data-src" ändern. Das Bild wird nicht geladen. Aber der Ort wird gespeichert mit dem Tag. Was ich mag.

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

Ein einfaches Stück jQuery kopiert data-src nach src, wodurch das Bild geladen wird, wenn Sie es benötigen. In meinem Fall, wenn die Seite fertig geladen wurde.

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

Ich wette, der jQuery-Code könnte abgekürzt werden, ist aber so verständlich.

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

Sollte besser als Ajax sein, da, wenn es sich um eine Galerie handelt und Sie eine Liste von Bildern durchlaufen, das Bild sich bereits im Cache befindet, keine weitere Anfrage an den Server gesendet wird. Es fordert im Fall von jQuery/ajax an und gibt ein HTTP 304 (Nicht geändert) zurück und verwendet dann das Originalbild aus dem Cache, falls es bereits vorhanden ist. Die obige Methode reduziert eine leere Anfrage an den Server nach der ersten Schleife von Bildern in der Galerie.

8
Jaseem

Sie können ein Deferred-Objekt zum ASYNC-Laden verwenden.

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

Bitte beachten Sie: image.onload muss vor image.src stehen, um Probleme mit dem Cache zu vermeiden.

4
phpcoding

Wenn Sie nur die Quelle des Bildes festlegen möchten, können Sie diese verwenden.

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

Das funktioniert auch ..

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

AFAIK, Sie müssten hier eine .load () - Funktion ausführen, wie dies für .ajax () der Fall ist, aber Sie könnten jQuery setTimeout verwenden, um es am Leben zu halten (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

verwenden Sie .load, um Ihr Bild zu laden. Um zu testen, ob Sie einen Fehler erhalten (sagen wir 404), können Sie Folgendes tun:

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

achtung - Das Ereignis .error () wird nicht ausgelöst, wenn das Attribut src für ein Bild leer ist.

2
Poelinca Dorin

$ (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">');
    }
});