Image in TableView scroll jerky

Hi, 

In my application I load images from url and insert them into a tableView row. I use loadRemoteImage function only when image doesn’t exist in TemporaryDirectory. Everything is ok, but when I run my application on phone ( I tested on Xperia Z2, Xperia S, Lenovo Vibe Z ) tableView doesn’t scroll smoothy, there is minimal lag when new row is rendered.

How to eliminete this?

Version of Corona: 2014.2393 (2014.8.5)

This is the code:

 local function onRowRender( event ) local is\_image\_from\_temp; local row = event.row local params = event.row.params local function networkListener(event) if ( event.isError ) then print ( "Network error - download failed" ) else event.target.x = display.contentCenterX event.target.y = row.contentHeight \* 0.33 row:insert(event.target); end end -- Create name of file filename = params.image filename = string.sub(filename,-11) -- Open Temporary Directory local path = system.pathForFile( filename, system.TemporaryDirectory ) local fhd = io.open( path ) -- Determine if file exists if fhd then -- If image exists - load . row.image = display.newImage( filename ,system.TemporaryDirectory) row.image.x = display.contentCenterX row.image.y = row.contentHeight \* 0.33 is\_image\_from\_temp = 1 fhd:close() else -- If not - download. display.loadRemoteImage(params.image, "GET", networkListener, filename, system.TemporaryDirectory) is\_image\_from\_temp = 0 end row.text = display.newText(params.label, 0, 0, native.systemFont, 18) row.place = display.newText(params.place, 0, 0, native.systemFont, 18) row.info = display.newText(params.message, 0, 0, display.contentWidth, 0, native.systemFont, 14) row.text:setFillColor( 0.5, 0.5, 1.0 ) row.info:setFillColor( 0, 0, 0 ) row.place:setFillColor( 0, 0, 0 ) row.text.x = display.contentCenterX row.text.y = row.contentHeight \* 0.06 row.info.x = display.contentCenterX row.info.y = row.contentHeight \* 0.8 row.place.x = display.contentCenterX row.place.y = row.contentHeight \* 0.6 if(is\_image\_from\_temp == 1)then row:insert(row.image) end row:insert(row.info) row:insert(row.text) row:insert(row.place) end local function onRowTouch( event ) if("tap" == event.phase)then local options = { effect = "fade", time = 300, params = { info = event.target.params.message, image = event.target.params.image, place = event.target.params.place, label = event.target.params.label } } composer.gotoScene("info",options) end if("swipeRight" == event.phase)then sharePanel:show() end if("swipeLeft" == event.phase)then sharePanel:hide() end end local tableView1 = widget.newTableView({ width = display.contentWidth, height = display.contentHeight; backgroundColor = { 0.6 }, --noLines = true, onRowRender = onRowRender, onRowTouch = onRowTouch, isBounceEnabled = true, friction = 0.980, })

Hi @przemek.kuzia,

There will definitely be some lag if you must load images from a network during scrolling of the table view. Is there any way that you can pre-determine which images will be necessary, and then pre-load them (cache them) in advance of showing the table view?

Best regards,

Brent

Hi Brent, thanks for fast reply  :slight_smile: .

Yes i can to this, and i made a little experiment. I changed my code so that images are loading only from TemporaryDirectory

(images are already there), and it looks the same.

Is it possible to increase number of rows which are rendered in advanced?

Hi @przemek.kuzia,

In a table view, it automatically renders the rows that are visible on screen (or will become visible). So the rendering occurs at this point, and you can’t force more rows to render in advance. The most important thing is what you’re doing now: making sure that the images are faster to access (not from the network).

Brent

Hi @przemek.kuzia,

There will definitely be some lag if you must load images from a network during scrolling of the table view. Is there any way that you can pre-determine which images will be necessary, and then pre-load them (cache them) in advance of showing the table view?

Best regards,

Brent

Hi Brent, thanks for fast reply  :slight_smile: .

Yes i can to this, and i made a little experiment. I changed my code so that images are loading only from TemporaryDirectory

(images are already there), and it looks the same.

Is it possible to increase number of rows which are rendered in advanced?

Hi @przemek.kuzia,

In a table view, it automatically renders the rows that are visible on screen (or will become visible). So the rendering occurs at this point, and you can’t force more rows to render in advance. The most important thing is what you’re doing now: making sure that the images are faster to access (not from the network).

Brent