Muat secara sinkron gambar dengan jQuery

Saya ingin memuat gambar eksternal pada halaman saya secara tidak sinkron menggunakan jQuery dan saya telah mencoba yang berikut ini:

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

   },
   error: function(r,x) {

   }
});

Tetapi selalu mengembalikan kesalahan, apakah mungkin memuat gambar seperti ini?

Saya mencoba menggunakan .loadmetode dan berfungsi tetapi saya tidak tahu bagaimana saya dapat mengatur batas waktu jika gambar tidak tersedia (404). Bagaimana saya bisa melakukan ini?

Tidak perlu untuk ajax. Anda dapat membuat elemen gambar baru, mengatur atribut sumbernya dan menempatkannya di suatu tempat di dokumen setelah selesai memuat:

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

JIKA ANDA SANGAT PERLU MENGGUNAKAN AJAX ...

Saya mendatangi kami di mana handler yang menangani bukan pilihan yang tepat. Dalam kasus saya saat mencetak melalui javascript. Jadi sebenarnya ada dua opsi untuk menggunakan gaya AJAX untuk ini:

Solusi 1

Gunakan data gambar Base64 dan layanan gambar REST. Jika Anda memiliki layanan web Anda sendiri, Anda bisa menambahkan skrip JSP / PHP REST yang menawarkan gambar dalam penyandian Base64. Sekarang bagaimana itu berguna? Saya menemukan sintaks baru yang keren untuk penyandian gambar:

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

Jadi, Anda dapat memuat data Image Base64 menggunakan Ajax dan setelah selesai Anda membangun string data Base64 ke gambar! Sangat menyenangkan :). Saya merekomendasikan untuk menggunakan situs ini http://www.freeformatter.com/base64-encoder.html untuk penyandian gambar.

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

Solusi2:

Trik browser untuk menggunakan cache-nya. Ini memberi Anda fadeIn () yang bagus ketika sumber daya ada di cache browser:

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

Namun, kedua metode ini memiliki kelemahan: Yang pertama hanya berfungsi di browser modern. Yang kedua memiliki gangguan kinerja dan bergantung pada asumsi bagaimana cache akan digunakan.

bersorak, akan

Menggunakan jQuery, Anda cukup mengubah atribut "src" menjadi "data-src". Gambar tidak akan dimuat. Tetapi lokasi disimpan dengan tag. Yang saya suka.

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

Sepotong jQuery sederhana menyalin data-src ke src, yang akan mulai memuat gambar saat Anda membutuhkannya. Dalam kasus saya ketika halaman selesai memuat.

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

Saya yakin kode jQuery bisa disingkat, tetapi bisa dimengerti dengan cara ini.

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

Seharusnya lebih baik daripada ajax karena jika ini adalah galeri dan Anda mengulang daftar foto, jika gambar sudah dalam cache, itu tidak akan mengirim permintaan lain ke server. Ini akan meminta dalam kasus jQuery / ajax dan mengembalikan HTTP 304 (Tidak dimodifikasi) dan kemudian menggunakan gambar asli dari cache jika sudah ada di sana. Metode di atas mengurangi permintaan kosong ke server setelah loop pertama gambar di galeri.

Anda dapat menggunakan objek Ditangguhkan untuk memuat ASYNC.

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

Harap perhatikan: image.onload harus ada sebelum image.src untuk mencegah masalah dengan cache.

Jika Anda hanya ingin mengatur sumber gambar, Anda dapat menggunakan ini.

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

Ini juga berfungsi ..

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

AFAIK Anda harus melakukan fungsi .load () di sini sesuai dengan .ajax (), tetapi Anda bisa menggunakan jQuery setTimeout untuk membuatnya tetap hidup (ish)

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

gunakan .load untuk memuat gambar Anda. untuk menguji jika Anda mendapatkan kesalahan (misalkan 404) Anda dapat melakukan hal berikut:

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

cermat - .error () acara tidak akan memicu ketika atribut src kosong untuk gambar.

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