Laden Sie Bilder asynchron mit jQuery

142

Ich möchte mit jQuery externe Bilder 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 gibt immer einen Fehler zurück. Ist es überhaupt möglich, ein Bild wie dieses zu laden?

Ich habe versucht, die .loadMethode zu verwenden , und sie funktioniert, aber ich habe keine Ahnung, wie ich das Zeitlimit festlegen kann, wenn das Bild nicht verfügbar ist (404). Wie kann ich das machen?

Arief
quelle
Dies funktioniert für mich: stackoverflow.com/questions/6150289/…
MrRhoads

Antworten:

199

Keine Notwendigkeit für Ajax. Sie können ein neues Bildelement erstellen, sein Quellattribut festlegen und es nach Abschluss des Ladevorgangs 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);
        }
    });
karim79
quelle
20
Was tun mit dem Timeout und 404?
Arief
1
Wie kann man damit ein Timeout einstellen? Ich habe diese Methode ausprobiert, aber irgendwie wartet die Seite immer noch darauf, dass das Bild geladen wird.
Arief
7
Wenn Sie die Zeitleiste Ihres Browsers überprüfen, z. B. die Zeitleiste der Entwicklertools von Google Chrome, werden Sie feststellen, dass das Erstellen eines DOM-Elements (unabhängig davon, ob Sie es an das DOM anhängen oder nicht, anscheinend irrelevant ist) und das Festlegen seiner Quelle es zum Laden des aktuellen Dokuments hinzufügt list - Die Seite wird also NICHT "geladen", bis das erstellte Element geladen ist. Ihre Lösung ist eigentlich kein asynchrones Ereignis in dem Sinne, dass window.load () erst ausgelöst wird, wenn das Image geladen wurde, wodurch möglicherweise bestimmte Vorgänge paintoder layoutVorgänge verzögert werden und onloadEreignisabhängigkeiten mit Sicherheit verzögert werden .
Tom Auger
2
@ TomAuger: Wie können wir es also wirklich asynchron machen? Ich habe den Code gerade mit load () getestet und er ist NICHT asynchron.
BasZero
2
@gidzior Es funktioniert nicht in IE8, da Sie das SRC-Attribut in IE8 nicht mit jquery festlegen können. Siehe
Rich
77

WENN SIE AJAX WIRKLICH VERWENDEN MÜSSEN ...

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 Möglichkeiten, den AJAX-Stil dafür zu verwenden:

Lösung 1

Verwenden Sie Base64-Bilddaten und einen REST-Bilddienst. Wenn Sie über einen eigenen Webservice verfügen, können Sie ein JSP / PHP-REST-Skript hinzufügen, das Bilder in Base64-Codierung bietet. Wie ist das nun nützlich? Ich bin auf eine coole neue Syntax für die Bildcodierung gestoßen:

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

Sie können also die Image Base64-Daten mit Ajax laden und nach Abschluss die Base64-Datenzeichenfolge für das Image erstellen! Viel Spaß :). Ich empfehle, diese Website http://www.freeformatter.com/base64-encoder.html für die Bildcodierung 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 schönes 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 mit modernen Browsern. Der zweite hat Leistungsprobleme und beruht auf der Annahme, wie der Cache verwendet wird.

Prost, wird

mschmoock
quelle
1
Wenn der aktuelle Status der Browserunterstützung für Sie akzeptabel ist ( caniuse.com/#search=Blob ), können Sie Blobs anstelle von Daten-URIs verwenden. Dies fühlt sich weniger hackig an als die Verwendung von Base64-codierten Daten-URIs und verschwendet auch weniger Speicher (da Base64 kein speichereffizientes Format ist), obwohl letzteres in der realen Welt wahrscheinlich die meiste Zeit keine Rolle spielt.
Mark Amery
11

Mit jQuery können Sie einfach das Attribut "src" in "data-src" ändern. Das Bild wird nicht geladen. Der Speicherort wird jedoch mit dem Tag gespeichert . 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 bei Bedarf geladen wird. In meinem Fall, wenn die Seite vollständig 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, aber das ist auf diese Weise verständlich.

htho
quelle
4
Tipp: Wenn Sie die data-Tags verwenden, ist es ein bisschen einfacher, über sie zuzugreifen, $(element).data('src')anstatt$(element).attr('data-src')
Maxim Kumpan
Eigentlich würde ich heute jQuery nicht mehr benutzen. Dies ist jedoch eine Frage des persönlichen Geschmacks und hängt von der Größe der Website ab, die Sie erstellen. Aber das heiße Thema der Zeit ist "Progressive Images", vielleicht ist das etwas, worauf man achten sollte. smashingmagazine.com/2018/02/…
htho
8
$(<img />).attr('src','http://somedomain.com/image.jpg');

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

Jaseem
quelle
4

Sie können ein verzögertes Objekt zum Laden von ASYNC 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.

phpcoding
quelle
3

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

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

Das funktioniert auch ..

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

AFAIK Sie müssten hier eine .load () -Funktion ausführen, die an die .ajax () angehängt ist, aber Sie könnten jQuery setTimeout verwenden, um sie am Leben zu erhalten (ish).

<script>
 $(document).ready(function() {
 $.ajaxSetup({
    cache: false
});
 $("#placeholder").load("PATH TO IMAGE");
   var refreshId = setInterval(function() {
      $("#placeholder").load("PATH TO IMAGE");
   }, 500);
});
</script>
benhowdle89
quelle
2
Entschuldigung, ich habe Ihr Q leicht missverstanden. Ich dachte, Sie laden Bilder, die sich ändern oder so (daher das Ajax-Bit)
benhowdle89
2

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

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

Poelinca Dorin
quelle
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">');
    }
});
MadhaviLatha Bathini
quelle
Es funktioniert perfekt, während wir die Homepage laden, können wir verschiedene Bilder einstellen - von Polaris
MadhaviLatha Bathini
Zu viel Unordnung, unabhängig von der Beantwortung der Frage.
Maxim Kumpan