Reloading the images causes an 'undefined' error

[yazinsai]

I'm using the jail() method to load a sensitive user-uploaded image that is supplied by a PHP script (upon proper validation of the users session).

The image tag i'm using is shown below:

<img class='lazy' src='updating.gif' data-src='getimage.php?id={$imageid}' />

Now, in order to load it I use the following code:

$(document).ready(function(){
    $('img.lazy').jail({triggerElement:'#preview',event:'scroll'});
}

Which works perfectly fine! However, I have an option on the page to change that image from color to black & white. This setting is changed in the database and is automatically picked up by the getimage.php script. So all I need to do to update the preview, is refresh the image.

In order to do that, I simply used:

$('img.lazy').jail({triggerElement:'#preview',event:'scroll'});

This fails (using Firebug) with the following message:
"NetworkError: 404 Not Found - http://localhost/undefined"

I suspect that JAIL clears the data-src element after the image is loaded. Is that expected behavior or is it a bug?

Thanks,
Floating Rock

[sebarmeli]

JAIL clears the data-src element, correct.

Also, looking at the config you're using that means you want to lazy load the images when you scroll down inside a

, is that what you want?

[yazinsai]

@sebarmeli yes, that is correct. I want the lazy load to happen once the user scrolls within the #preview div.

I was able to resolve this issue by doing the following:
1- Update the jail.min.js script and remove the following statement:

n.removeAttr("data-src")

2- Run the following script before calling $('img.lazy').jail() the second time (attaching the &reload=1 parameter forces the browser to perform a refresh of the image):

$("img.lazy").each(function{
   var originalSrc = $(this).attr('data-src');
   $(this).attr('data-src', originalSrc + '&reload=1');
   $(this).attr('src',updatingImage);
});

Now, I can finally call the jail() method and it works fine:

$('img.lazy').jail({triggerElement:'#preview',event:'scroll'});

Might be a good idea to build this functionality in!

Cheers,
Floating Rock

[recyclerobot]

FYI:
fixed my undefined problem by checking

if($('img.lazy').length > 0) 

before invoking jail();

quick and dirty :)