Load an image through jQuery Ajax

Question

I am creating an application which browses a large amount of pictures. At this point, that portion of the project is done and it sorts, filters, and loads the correct pictures, and even splits them into separate pages for faster loading.

This works great, but it still takes over 8 seconds to load the 25 pictures per page. I have done some research and I have concluded that using asynchronous jQuery Ajax requests would be the best to load them all at the same time as fast as possible.

Here is my code for this so far:

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

The problem with this code is that it doesn't load nothing but an empty white square with a grey border. When I modify the code and run it in console in Chrome, data ends up being a string of jumbled up characters which I presume are the raw image data.

I have been searching for several days now, including on SO, and I have yet to find a solution which does what I need. On the contrary, I have found solutions which simply put the url into the image source using jQuery attr() which isn't what I need.

If anyone can provide any kind of solution to fix this code, or even perhaps a different and more efficient method of getting all the images, I am open to anything.

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

Regards, Emanuel

Answer 1

If you're using Base64 image data (the string of jumbled characters you mentioned), you'll need to get your img src to be something like:

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

So your code should be:

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

However... I'd be very surprised if loading the images over AJAX and using the Base64 content is any quicker than using a normal <img src="path"/> approach.

The point of AJAX is to fetch some data after the DOM is loaded. All moderns browsers will already fetch images asynchronously. I doubt you'll see any performance gain whatsoever.

I'd suggest the more likely problem is that your 25 images... which I suppose are displayed as thumbnails... are still large, hi-res images. You should save a smaller 'thumbnail' version, and then fetch the hi-res image when/if the user clicks on the thumbnail to view the full-size one.

Note that an element ID can start with (or be) a number. This wasn't valid in HTML4, but is perfectly fine in HTML5. However, you might have trouble with CSS rules - so you'd be better off prefixing with a letter (i.e. i1,i2,i3...).

Answer 2

Just to update (May 2020) as I have been trying to get images via ajax, with no success despite using the base64 approach.

Here is some code I have modified which returns the image as a blob:

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

Working example here: http://jsfiddle.net/lharby/Ljwa1yhd/

I realise this is slightly different to the OP request, but I found my way here searching 'get images via ajax jquery' so I hope it is of help. And as I could not get the base64 method to work, I thought an example might be useful.

Answer 3

I had an issue with this a while ago, I used this code:

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

UPDATE:

using your images 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"]

You can do this:

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

and in the imageLoad function:

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

Answer 4

Change your ids to id1,id2 or something similar from 1,2 and in success use this:

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

see why id should not start from a number:What are valid values for the id attribute in HTML?