jQuery and Ajax Loading Images

Question

I have a site with a giant portfolio with a ton of high-res images.

I do not want to resize these images, but I would like to be able to pull them in async.

Come forth jQuery .ajax

But my code is wrong, somehow. What it does is seem to pull in the page, instead of the image "src"

Can you help:

// Load in the images via ajax:
var $imgs = $('.ajax-image');
$imgs.each(function(i){
    var $imgsrc = $(this).attr('src');
    var $url = '/php/pull-image.php?i=' + $imgsrc;
    $.ajax({
        url : $url,
        mimeType: "text/plain", 
        processData : false,
        cache: false,
        success: function (html) {
            $(this).attr('src', html);   
        }
   });
});

and the PHP:

$path = $_GET['i'];

$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
echo 'data:image/' . $type . ';base64,' . base64_encode($data);

Image tags are simply: <img src="http://example.com/images/image.ext" />

What am I doing wrong here? and how can I fix it?

How would this improve performance? Your images are part of the html so they get loaded as the browser loads the page and you only replace the source attribute after they have been loaded through javascript again. If you want to have influence over what is loaded when, don't put them in the `src` attribute, but for example in a `data-src` attribute so that the browser does not load them. — jeroen, Jun 11 '14 at 18:19
console.log(b64data), to check what is the response from server before using it.Try this way header("Content-type: image/" . $type); echo 'data:image/' . $type . ';base64,' . base64_encode($data); — A l w a y s S u n n y, Jun 11 '14 at 18:34

score 1 · Answer 1 · answered Jun 11 '14 at 18:37

1

Your php page is getting an error because you are not passing in anything for parameter i. Your php is therefore throwing a 404 error - a full HTML response.

I think you have a javascript syntax error that is causing this:

 url : '/php/pull-image.php?i=' . $imgsrc,

Replace this line with:

url : '/php/pull-image.php?i=' + '<?php echo json_encode($imgsrc); ?>' ,

answered Jun 11 '14 at 18:37

Simcha Khabinsky

1,970
2
19
34

yes. I just noticed and fixed that, and the URL correctly pulls down now... but the imag src still is not getting replaced with the base64 – Kevin Jun 11 '14 at 18:39
what does `html` contain? do an `alert(html);`. What does that return now? – Simcha Khabinsky Jun 11 '14 at 18:40

score 1 · Accepted Answer · edited May 23 '17 at 11:49

1

As I mentioned in my comment, I don't see how this would do what you want but to address your current problem: It is probably caused because of this in the context of the success function, is not the same as the this in the context of your each() function.

You should save the element so that you can access it in the success function:

$imgs.each(function(i){
    var el = $(this),
        $imgsrc = el.attr('src'),
        $url = '/php/pull-image.php?i=' + $imgsrc;

    $.ajax({
        url : $url,
        mimeType: "text/plain", 
        processData : false,
        cache: false,
        success: function (html) {
            el.attr('src', html);   
        }
   });
});

Edit: There is no real need to use ajax / php here to set the source of the image. You could also generate some images in javascript (in batches), add an onload() function for the images and set the source of your html elements when they are loaded and then get the next batch. See for example this question: JavaScript: Load an image from javascript then wait for the "load" event of that image

edited May 23 '17 at 11:49

Community

1
1

answered Jun 11 '14 at 18:47

jeroen

91,079
21
114
132

well... I was hoping for some un-blocking. I am pulling these images in from my blog (which reside on the same server)... however, I am finding that there is now more blocking while these all load in – Kevin Jun 11 '14 at 18:50
I guess I just "ass"umed that ajax was supposed to be accomplished asynchronously to the page loading... – Kevin Jun 11 '14 at 18:53
sorry... and yes, I moved it out or the src attribute, and put the urls in a data-src attribute to pull them in from – Kevin Jun 11 '14 at 18:54
@o7thWebDesign Where are you calling your script, in `$(window).load()`? – jeroen Jun 11 '14 at 20:00
1

@o7thWebDesign And you have more blocking now than before (you shouldn't)? If so, you should post a new question with the actual code and problem. – jeroen Jun 11 '14 at 20:02
1

I have more blocking. I'm actually going to do it a different way. Since I am pulling the images from my blog, which resides on the same server, I am going to put an Alias in my httpd.conf file for the actual location, and just do it like that. I'll also be able to take more advantage of this sites caching, etc... – Kevin Jun 11 '14 at 20:03
@o7thWebDesign That's probably cause because you are launching all ajax requess at the same time and the browser only handles a limited number of requests to the same domain simultaneously. – jeroen Jun 11 '14 at 20:07
1

@o7thWebDesign I added another suggestion to my answer. – jeroen Jun 11 '14 at 20:11

jQuery and Ajax Loading Images

2 Answers2