JQuery ile görüntüleri eşzamansız olarak yükleyin

JQuery kullanarak sayfamdaki dış görüntüleri zaman uyumsuz olarak yüklemek istiyorum ve aşağıdakileri denedim:

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

   },
   error: function(r,x) {

   }
});

Ama her zaman hata döndürür, böyle bir görüntüyü yüklemek bile mümkün mü?

.loadYöntemi kullanmaya çalıştım ve işe yarıyor, ancak görüntü mevcut değilse zaman aşımını nasıl ayarlayabileceğime dair hiçbir fikrim yok (404). Bunu nasıl yapabilirim?

Ajax'a gerek yok. Yeni bir resim öğesi oluşturabilir, kaynak niteliğini ayarlayabilir ve yüklemeyi bitirdikten sonra belgenin herhangi bir yerine yerleştirebilirsiniz:

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

AJAX KULLANMAK GEREKİRSE ...

Yükleme işleyicilerinin doğru seçim olmadığı kullanımlarla karşılaştım. Benim durumumda javascript ile yazdırırken. Yani bunun için AJAX stilini kullanmak için aslında iki seçenek var:

Çözüm 1

Base64 görüntü verilerini ve bir REST görüntü hizmetini kullanın. Kendi web hizmetiniz varsa, Base64 kodlamasında resim sunan bir JSP / PHP REST betiği ekleyebilirsiniz. Şimdi bu nasıl faydalı? Görüntü kodlaması için yeni ve güzel bir sözdizimi ile karşılaştım:

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

Böylece Ajax kullanarak Image Base64 verilerini yükleyebilir ve ardından tamamlandığında görüntüye Base64 veri dizesini oluşturabilirsiniz! Çok eğlenceli :). Bu siteyi görüntü kodlaması için http://www.freeformatter.com/base64-encoder.html kullanmanızı tavsiye ederim .

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

Solution2:

Önbelleği kullanmak için tarayıcıyı kandırın. Bu, kaynak tarayıcı önbelleğinde olduğunda size güzel bir fadeIn () sağlar:

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

Ancak, her iki yöntemin dezavantajları vardır: Birincisi sadece modern tarayıcılarda çalışır. İkincisi performans hataları ve önbelleğin nasıl kullanılacağı varsayımına dayanır.

alkış, irade

JQuery kullanarak "src" özniteliğini "data-src" olarak değiştirebilirsiniz. Görüntü yüklenmeyecek. Ancak konum etiketi ile birlikte saklanır . Hangisini seviyorum.

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

Basit bir jQuery parçası, data-src dosyasını src'ye kopyalar; bu, gerektiğinde görüntüyü yüklemeye başlar. Benim durumumda sayfanın yüklenmesi bittiğinde.

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

Eminim jQuery kodu kısaltılmış olabilir, ama bu şekilde anlaşılabilir.

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

Ajax daha iyi olmalı çünkü onun bir galeri ve bir resim listesi üzerinden döngü, görüntü zaten önbellek varsa, sunucuya başka bir istek göndermeyeceğim. JQuery / ajax durumunda talep eder ve bir HTTP 304 (Değiştirilmedi) döndürür ve sonra zaten varsa önbellekten orijinal görüntüyü kullanır. Yukarıdaki yöntem, galerideki ilk görüntü döngüsünden sonra sunucuya boş bir isteği azaltır.

ASYNC yüklemesi için Ertelenmiş nesneler kullanabilirsiniz.

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

Lütfen dikkat: önbellek sorunlarını önlemek için image.onload image.src'den önce olmalıdır.

Yalnızca görüntünün kaynağını ayarlamak istiyorsanız bunu kullanabilirsiniz.

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

Bu da işe yarıyor ..

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

AFAIK, burada .ajax () 'a gösterildiği gibi bir .load () işlevi yapmanız gerekir, ancak canlı tutmak için jQuery setTimeout kullanabilirsiniz (ish)

<script>
 $(document).ready(function() {
 $.ajaxSetup({
    cache: false
});
 $("#placeholder").load("PATH TO IMAGE");
   var refreshId = setInterval(function() {
      $("#placeholder").load("PATH TO IMAGE");
   }, 500);
});
</script>

resminizi yüklemek için .load komutunu kullanın. bir hata alıp almadığınızı test etmek için (diyelim ki 404) aşağıdakileri yapabilirsiniz:

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

careful - .error () olayı, resim için src niteliği boş olduğunda tetiklenmez.

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