JAIL JQuery Plugin (jQuery Asynchronous Image Loader)
I would really appreciate if anyone can spot anything that I am doing wrong here!
I am attempting to use this plug-in: http://www.sebastianoarmelibattana.com/projects/jail
I have included it in my web page which is a search form that submits via an AJAX request and displays the search results in a table. This table happens to be another plugin called dataTables.
Here are the relevant bits of code:
The re-initialisation of the plug-ins after the AJAX request has been successfully completed (the same initialisation is done in the actual HTML page aswell):
// re-initialise lazyload, lightbox and dataTable plugins
$('img.lazy').jail();
$('a.lightbo开发者_StackOverflow社区x').lightBox();
$('#test-docs-table').dataTable( {
"bPaginate": false,
"sDom": 'Rlfrtip',
"aoColumns": [
null,
null,
{ "sType": "title-numeric" },
null
]
});
This is the line of php that displays the relevant table cell with the thumbnail in it:
$shortname = $row['filename'];
$doc = "/central/testdocs/".$row['filename'];
$thumb = "include/doc-thumbnail.php?doc=$doc";
echo("\n<div class=\"thumbnail\">\n<td class=\"center\"><a class=\"lightbox\" title=\"$shortname\" href=\"$thumb&dpi=96\"><img class=\"lazy\" data-href=\"$thumb\" src=\"images/blank.png\" width=\"50\" height=\"50\"/></a></td>\n</div>\n");
Notice that another plug-in is involved - lightbox so not sure if that affects the situation.
At the moment it looks like the JAIL plug-in is doing something but all the images are loaded as soon as the page has loaded.
The lightbox still works when you click on the thumbnails - the page actually works just the same as it did before except that before the page is fully loaded the thumbnail cell is empty.
I discovered what was wrong, the silliest of things!
Because I tried to use the original lazy load plug-in I had an existing rule in my CSS hiding images of class lazy so the plug-in wasn't able to do it's thing.
If anyone else runs into this problem that's what to do!
精彩评论