Загрузите изображение через jQuery Ajax

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

Это прекрасно работает, но загрузка 25 картинок на страницу все равно занимает более 8 секунд. Я провел некоторое исследование и пришел к выводу, что использование асинхронных запросов jQuery Ajax было бы наилучшим, чтобы загрузить их все одновременно и максимально быстро.

Вот мой код для этого до сих пор:

var imageArray = <?php if (!empty($images)) {echo '["' . implode('", "', $images) . '"]';} else {echo "false";} ?>;
console.log(imageArray);
console.log(imageArray.length);
for (i = 0; i < imageArray.length; i++) {
    $.ajax({
        type: 'GET',
        url: imageArray[i],
        dataType: 'image/jpg',
        async: true,
        success: function (data) {
            $("#" + i).attr("src", data);
        }
    });
}

Проблема этого кода в том, что он не загружает ничего, кроме пустого белого квадрата с серой рамкой. Когда я изменяю код и запускаю его в консоли в Chrome, data в итоге получается строка из перемешанных символов, которые, как я полагаю, являются необработанными данными изображения.

Я искал несколько дней, в том числе на SO, и мне еще предстоит найти решение, которое делает то, что мне нужно. Наоборот, я нашел решения, которые просто помещают URL в источник изображения, используя jQuery. attr() что не то, что мне нужно.

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

imageArray: http://pastebin.com/03tvpNey

С уважением, Эмануэль

Источник

3 ответа

Решение

Если вы используете данные изображения Base64 (указанную вами строку из перемешанных символов), вам необходимо получить img src быть чем-то вроде:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

Итак, ваш код должен быть:

var imageArray = <?php if (!empty($images)) {echo '["' . implode('", "', $images) . '"]';} else {echo "false";} ?>;
console.log(imageArray);
console.log(imageArray.length);
for (i = 0; i < imageArray.length; i++) {
$.ajax({
    type: 'GET',
    url: imageArray[i],
    dataType: 'image/jpg',
    async: true,
    success: function (data) {
        $("#" + i).attr("src", 'data:image/png;base64,'+data);
    }
});
}

Однако... Я был бы очень удивлен, если загрузка изображений через AJAX и использование содержимого Base64 происходит быстрее, чем использование обычного <img src="path"/> подход.

Смысл AJAX заключается в получении некоторых данных после загрузки DOM. Все современные браузеры будут загружать изображения асинхронно. Я сомневаюсь, что вы увидите какой-либо прирост производительности.

Я бы предположил, что более вероятная проблема заключается в том, что ваши 25 изображений... которые, я полагаю, отображаются в виде миниатюр... по-прежнему большие изображения с высоким разрешением. Вам следует сохранить уменьшенную версию "миниатюры", а затем получить изображение высокого разрешения, когда / если пользователь нажимает на миниатюру, чтобы просмотреть полноразмерную версию.

Обратите внимание, что идентификатор элемента может начинаться с (или быть) цифрой. Это недопустимо в HTML4, но совершенно нормально в HTML5. Тем не менее, у вас могут возникнуть проблемы с правилами CSS, поэтому вам лучше использовать префикс с буквой (например, i1,i2,i3...).

Источник

Просто для обновления (май 2020 г.), поскольку я пытался получить изображения через ajax, но безуспешно, несмотря на использование подхода base64.

Вот код, который я изменил, который возвращает изображение в виде капли:

const trigger = $('.trigger');
const wrapper = $('#wrapper');
const url = 'https://66.media.tumblr.com/35a8d8dac5c288505b3edb4a52655283/ee225bfce5e62623-af/s1280x1920/fad4e25562ce1b05c69dc8cc8da5a9a12d26a1aa.jpg';

trigger.on('click', () => {
    $.ajax({
       url,
       xhrFields:{
          responseType: 'blob'
       },
       success (data) {
          const url = window.URL || window.webkitURL;
          const src = url.createObjectURL(data);
          wrapper.attr('src', src);
       }
   });
});

Рабочий пример здесь: http://jsfiddle.net/lharby/Ljwa1yhd/

Я понимаю, что это немного отличается от запроса OP, но я нашел здесь свой способ поиска "получить изображения через ajax jquery", поэтому я надеюсь, что это поможет. И поскольку мне не удалось заставить работать метод base64, я подумал, что пример может быть полезен.

Источник

У меня была проблема с этим некоторое время назад, я использовал этот код:

function loadImage(path, width, height, target) {
    var loaded = true;
    $('<img src="' + path + '">').load(function () {
        if (loaded) {
            $(this).css('maxWidth', width).css('maxHeight', height).appendTo(target);
            loaded = false;
        }
    });
}

ОБНОВИТЬ:

используя ваш массив изображений:

["20151107_140328.jpg", "20151107_140329.jpg", "20151107_141113.jpg", "20151107_141114.jpg", "20151107_141439.jpg", "20151107_141447.jpg", "20151107_141500.jpg", "20151107_205509.jpg", "20151107_205512.jpg", "20151107_213703.jpg", "20151107_213708.jpg", "20151107_213823.jpg", "20151108_143256.jpg", "20151108_143258.jpg", "20151108_143320.jpg", "20151108_143322.jpg", "20151108_143339.jpg", "20151108_143340.jpg", "20151108_143419.jpg", "20151108_143422.jpg", "20151108_143433.jpg", "20151108_143435.jpg", "20151108_143443.jpg", "20151108_143445.jpg"]

Вы можете сделать это:

var image_array = ["20151107_140328.jpg", "20151107_140329.jpg", "20151107_141113.jpg", "20151107_141114.jpg", "20151107_141439.jpg", "20151107_141447.jpg", "20151107_141500.jpg", "20151107_205509.jpg", "20151107_205512.jpg", "20151107_213703.jpg", "20151107_213708.jpg", "20151107_213823.jpg", "20151108_143256.jpg", "20151108_143258.jpg", "20151108_143320.jpg", "20151108_143322.jpg", "20151108_143339.jpg", "20151108_143340.jpg", "20151108_143419.jpg", "20151108_143422.jpg", "20151108_143433.jpg", "20151108_143435.jpg", "20151108_143443.jpg", "20151108_143445.jpg"];

for(var i = 0; i < image_array.length; i++) {
    loadImage(image_array[i], <width>, <height>, <container targeted>);
}

и в функции imageLoad:

function loadImage(path, width, height, target) {
    var loaded = true;
    $('<img src="/path/to/image/' + path + '">').load(function () {
        if (loaded) {
            $(this).css('maxWidth', width).css('maxHeight', height).appendTo(target);
            loaded = false;
        }
    });
}
Источник

Измените свои идентификаторы на id1,id2 или что-то похожее из 1,2 и в случае успеха используйте это:

            $("#id" + i).attr("src", data);

Выясните, почему идентификатор не должен начинаться с цифры: каковы допустимые значения атрибута id в HTML?

Источник
Другие вопросы по тегам