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 .load
Methode 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?
javascript
jquery
ajax
image
jquery-load
Arief
quelle
quelle
Antworten:
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:
quelle
paint
oderlayout
Vorgänge verzögert werden undonload
Ereignisabhängigkeiten mit Sicherheit verzögert werden .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:
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.
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:
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
quelle
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.
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.
Ich wette, der jQuery-Code könnte abgekürzt werden, aber das ist auf diese Weise verständlich.
quelle
data-
Tags verwenden, ist es ein bisschen einfacher, über sie zuzugreifen,$(element).data('src')
anstatt$(element).attr('data-src')
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.
quelle
Sie können ein verzögertes Objekt zum Laden von ASYNC verwenden.
Bitte beachten Sie: image.onload muss vor image.src stehen, um Probleme mit dem Cache zu vermeiden.
quelle
Wenn Sie nur die Quelle des Bildes festlegen möchten, können Sie dies verwenden.
quelle
Das funktioniert auch ..
quelle
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).
quelle
Verwenden Sie .load, um Ihr Bild zu laden. Um zu testen, ob Sie einen Fehler erhalten (sagen wir 404), können Sie Folgendes tun:
Vorsicht - Das Ereignis .error () wird nicht ausgelöst, wenn das src-Attribut für ein Bild leer ist.
quelle
$ (function () {
quelle