Асинхронная загрузка изображений с помощью jQuery

ЕСЛИ ВАМ НУЖНО ИСПОЛЬЗОВАТЬ AJAX...

Я пришел через usecases, где обработчики onload не были правильным выбором. В моем случае при печати через javascript. Таким образом, для этого есть два варианта использования стиля AJAX:

Решение 1

Используйте данные изображения Base64 и службу изображения REST. Если у вас есть собственный веб-сервис, вы можете добавить JSP/PHP REST script, который предлагает изображения в кодировке Base64. Теперь, как это полезно? Я наткнулся на новый класс синтаксиса для кодирования изображений:

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

Итак, вы можете загрузить данные Image Base64 с помощью Ajax, а затем по завершении вы создаете строку данных Base64 для изображения! Безудержное веселье:). Я рекомендую использовать этот сайт http://www.freeformatter.com/base64-encoder.html для кодирования изображения.

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

Решение2:

Обманите браузер, чтобы использовать его кеш. Это дает вам хороший fadeIn(), когда ресурс находится в кеше браузеров:

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

Однако оба метода имеют свои недостатки: первый работает только в современных браузерах. Второй из них имеет сбои производительности и полагается на предположение о том, как будет использоваться кеш.

веселит, будет

Используя jQuery, вы можете просто изменить атрибут "src" на "data-src". Изображение не будет загружено. Но местоположение хранится с тегом. Что мне нравится.

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

Простая часть jQuery копирует data-src в src, который начнет загружать изображение, когда вам это нужно. В моем случае, когда страница закончила загрузку.

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

Я уверен, что код jQuery может быть сокращен, но это понятно.

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

Должен быть лучше, чем ajax, потому что если его галерея и вы перебираете список фотографий, если изображение уже находится в кеше, оно не будет отправлять другой запрос на сервер. Он запросит в случае jQuery/ajax и возвращает HTTP 304 (не изменен), а затем использует исходное изображение из кеша, если оно уже существует. Вышеупомянутый метод уменьшает пустой запрос на сервер после первого цикла изображений в галерее.

Вы можете использовать объекты Отложенные для загрузки 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);
});

Обратите внимание: image.onload должен быть перед image.src, чтобы предотвратить проблемы с кешем.

Если вы просто хотите установить источник изображения, вы можете его использовать.

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

Это тоже работает.

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

Используйте .load для загрузки изображения. для проверки, если вы получите сообщение об ошибке (скажем, 404), вы можете сделать следующее:

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

осторожно -.error() не будет срабатывать, когда атрибут src пуст для изображения.

AFAIK вам нужно будет сделать функцию .load() здесь как присоединенную к .ajax(), но вы можете использовать jQuery setTimeout, чтобы сохранить его в реальном времени (ish)

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

Вы можете это сделать.. или вы можете использовать этот бит кода, который работает одинаково и меньше.

$(function() {
    $('body').append('<img src="images.png">');
});

Это сохраняет некоторый код.

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