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

Я хочу, чтобы загрузить внешние изображения на моей странице асинхронно с помощью jQuery и я попробовал следующее:

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

   },
   error: function(r,x) {

   }
});

но он всегда возвращает ошибку, это даже можно загрузить изображение, как это?

Я пытался использовать .load способ и он работает, но я понятия не имею, как я могу установить тайм-аут, если изображение не доступен (404). Как я могу это сделать?

10 132
javascript jquery image-processing ajax jquery-load

10 ответов:

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

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

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

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

Решение 1

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

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

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

Solution2:

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

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

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

ура, будет

70

С помощью 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 может быть сокращен, но это понятно таким образом.

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

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

7

вы можете использовать отложенные объекты для асинхронной загрузки.

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

Пожалуйста, обратите внимание: изображения.onload должен быть перед изображением.src для предотвращения проблем с кэшем.

4

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

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

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

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

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>
2

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

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

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

2

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