image thumbs in table column. lazy loading?

gregt

Hi, I have a table with column containing unique image thumbnails. The problem i have is that when the page is opened every single thumb (for about 1000 rows) is downloaded even though only the first 10 rows are visible.

Whats the easiest way to get the table to 'lazy load' only the images for rows that are visible?

gregt

I've read the docs some more but still no luck. If there was a handler that was called for rows as they become visible or as a new page is shown then I was thinking I could generate the image for each visible row at that point from hidden table data. But it doesn't look like there's anything like that. Anyone have any other ideas?

gregt

I should have said btw that in this case I'm loading data via Ajax

gregt

Ive found a solution! To anyone else wanting to do this kind of thing, you can use fnRowCallback - see docs at http://datatables.net/usage/callbacks. It lets me do exactly what I need.

I can now have a hidden column in my data with the image urls in and create an image tag as the rows are drawn. Result = no more monster load up front of every bloody thumbnail. Happy days.

ed

Hi Gregt,

I have a similar problem.
Could you please provide the code as well?

Thank you :-)

allan

@gregt : Nice use of fnRowCallback :-) . Thanks for posting your solution to this.

@ed : Just take the data from the row/cell, and wrap it up in is what I think gregt is suggesting. I'd imgine fnRender would work as well - although that occurs when the row is 'added', so the browser _may_ load the image then... Go with fnRowCallback ;-)

Allan

gregt

@ed np, here's the main bits of code that did the trick (simplified)

[code]
oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": 'my_json_url/',
"fnRowCallback": customFnRowCallback,
"aoColumns": [
{ sTitle:'', sWidth:'10px', sClass:'tableThumbnailCell', bSortable:false } /*the thumbnail*/
,{ sTitle:'', bVisible:false } /*url*/
,{ sTitle:'Name' }
]
});

//custom function to generate img tags at render time (pseudo lazy loading)
function customFnRowCallback( nRow, aData, iDisplayIndex )
{
$('td:eq(0)', nRow).html( '' );
return nRow;
}
[/code]

The data coming back from my server is

[code]
{
aaData:[
['myurl/thumb1.png', 'myurl/thingy1.html', 'thingy1']
, ['myurl/thumb2.png', 'myurl/thingy2.html', 'thingy2']
...
]
}
[/code]

So the data coming back has 3 columns; img url, link url & name. The table has 2 visible columns; the thumbnail & the name. Each time a table row is drawn, customFnRowCallback will be called and it will build a string for the thumbnail column that is an img wrapping with a link.

Hope that helps;
Greg

ed

Hi Allan and Gregt,

Thank you guys for your quick answer.

@Gregt: Thanks for sharing this peace of code. It helped me a lot to understand. It works great now. It's really a good idea to do it with the callback method

@Allan: Big respect brother. I like your DataTables. Really fantastic work.

Thanks guys you made my day :-)

bradaric

Hi,

Very helpful :) Thanks :)

Take care,
Alex

MichaelJohnston

Thanks, this was super helpful! My approach is slightly different, but I think it offers a little more obfuscation and fanciness. Basically I add the class 'loading' to images I plan to use this effect upon so that I can add a little loading spinner to the background while the image loads. I then use a fake image attribute 'orig' for the image URLs so that I can swap the transparent gif I set for src as default. The callback function is as follows:

[code]function lazy_datatable(nRow, aData, iDisplayIndex)
{
var img = $('img.loading', nRow);

img.attr('src', img.attr('orig'));
return nRow;
}[/code]