Laden Sie Bilder asynchron mit jQuery

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?

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

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

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.

$(<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.

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.

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

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

Das funktioniert auch ..

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

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>

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.

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