Android listview only loads images on the current screen (solve the problem of loading choppy items when the list slides)

Recently, the listview page displays images and text (the parsed text content is downloaded first, and the image is loaded asynchronously). After you click the next page, the text is loaded and slide down immediately, at this time, the background uses the thread pool to asynchronously download images. I have 20 images on each page, that is, 20 images. This will cause the listview to slide and slow down!

This is what users don't want to see. I have referred to Netease news and e-market applications and found that they only load images on the screen, but it is unrealistic not to load, so I also made one. I'm a cainiao, and I admit that although I don't necessarily have the same experience with them, it does solve the choppy phenomenon at the moment of page turning.

Because I have not found any related articles on the internet, I hope it will be useful to my friends ~

The following is the relevant code (the page is not displayed ):

Java code

1. /**
2. * List rolling listener
3. */
4. Listview. setonscrolllistener (New onscrolllistener (){
   
5. @ Override
6. Public void onscrollstatechanged (abslistview view,
   Int scrollstate ){
7. // Todo auto-generated method stub
   
8. // Asynchronously load the image
9. If (scrollstate = onscrolllistener. scroll_state_idle) {// The image is loaded when the list stops scrolling.
   
10. Pageimgload (_ start_index, _ end_index );
11. }
12. }
13. @ Override
14. Public void onscroll (abslistview view,
    Int firstvisibleitem,
15. Int visibleitemcount,
    Int totalitemcount ){
16. // Todo auto-generated method stub
    
17. // Set the start index and end index displayed on the current screen
18. _ Start_index = firstvisibleitem;
19. _ End_index = firstvisibleitem + visibleitemcount;
20. If (_ end_index> = totalitemcount ){
    
21. _ End_index = totalitemcount-1;
    
22. }
23. }
24. });

/*** List rolling listener */listview. setonscrolllistener (New onscrolllistener () {@ overridepublic void onscrollstatechanged (abslistview view, int scrollstate) {// todo auto-generated method stub // asynchronously load image if (scrollstate = onscrolllistener. objects) {// when the list stops scrolling, The pageimgload (_ start_index, _ end_index) ;}@ overridepublic void onscroll (abslistview view, int firstvisibleitem, int visibleitemcount, int totalitemcount) {// todo auto-generated method stub // set the start index and end index_start_index = firstvisibleitem; _ end_index = firstvisibleitem + visibleitemcount; If (_ end_index> = totalitemcount) {_ end_index = totalitemcount-1 ;}}});

Java code

1. /**
2. * Only images from start_index to end_index are loaded.
3. * @ Param start_index
4. * @ Param end_index
5. */
6. Private void pageimgload (INT start_index,
   Int end_index ){
7. For (; start_index <end_index; start_index ++ ){
   
8. Hashmap <string, Object> curr_item = Adapter. getitem (start_index );
9. If (curr_item.get (constant. news_icon_url )! =
   Null
10. & Curr_item.get (constant. news_icon) = NULL ){
    
11. LoadImage (curr_item );
12. }
13. }
14. }

/*** Load only images from start_index to end_index * @ Param start_index * @ Param end_index */private void pageimgload (INT start_index, int end_index) {for (; start_index <end_index; start_index ++) {hashmap <string, Object> curr_item = adapter. getitem (start_index); If (curr_item.get (constant. news_icon_url )! = NULL & curr_item.get (constant. news_icon) = NULL) {LoadImage (curr_item );}}}

I used asynctask to load the Image Code asynchronously. However, after inheriting asynctask, it cannot be executed multiple times. Therefore, I used a thread to call handler to update the UI:

Java code

2. /**
3. * Asynchronously load images
4. * @ Param curr_item
5. */
6. Private void LoadImage (final hashmap <string, Object> curr_item ){
   
7. Executorservice. Submit (New runnable (){
   
8. Public void run (){
   
9. Try {
10. Drawable curr_icon = NULL;
11. String icon_url = (string) curr_item
12. . Get (constant. news_icon_url );
13. String newsid = (string) curr_item.get (constant. news_id );
15. If (imagecache. containskey (icon_url) {// soft reference
    
16. Softreference <drawable> softreference = imagecache
17. . Get (icon_url );
18. Curr_icon = softreference. Get ();
19. System. Out. println ("case using softreference !!!!!!!!!!!!!!!!!!!! ");
    
20. }
21. If (curr_icon = NULL ){
    
22. Httputils Hu = new httputils ();
    
23. Fileutils Fu = new fileutils ();
    
24. If (Hu. is_intent (home_activity.this )){
    
25. Fu. write2localfromis (home_activity.this, newsid
    
26. + Constant. save_news_icon_name
27. + Constant. save_img_suffix,
28. Hu. getisfromurl (icon_url ));
29. }
30. // Load images from the local machine. If there is no network, load the local image directly.
31. Curr_icon = Fu. readdrawablefromlocal (
32. Home_activity.this, newsid
33. + Constant. save_news_icon_name
34. + Constant. save_img_suffix );
35. Imagecache. Put (icon_url, new softreference <drawable> (
    
36. Curr_icon ));
37. }
38. Curr_item.put (constant. news_icon, curr_icon );
39. // Send the UI to handler for update
40. Message MSG = _ viewhandler. obtainmessage ();
41. MSG. arg1 = constant. msg_list_img_ OK;
42. MSG. sendtotarget ();
43. } Catch (exception e ){
44. Throw new runtimeexception (E );
    
45. }
46. }
47. });
48. }

/*** Asynchronously load the image * @ Param curr_item */private void LoadImage (final hashmap <string, Object> curr_item) {executorservice. submit (New runnable () {public void run () {try {drawable curr_icon = NULL; string icon_url = (string) curr_item.get (constant. news_icon_url); string newsid = (string) curr_item.get (constant. news_id); If (imagecache. containskey (icon_url) {// soft reference softreference <drawable> softreference = imageca Che. get (icon_url); curr_icon = softreference. get (); system. out. println ("case using softreference !!!!!!!!!!!!!!!!!!!! ");} If (curr_icon = NULL) {httputils Hu = new httputils (); fileutils Fu = new fileutils (); If (Hu. is_intent (home_activity.this) {Fu. write2localfromis (home_activity.this, newsid + constant. save_news_icon_name + constant. save_img_suffix, Hu. getisfromurl (icon_url);} // load the image locally. If no network is available, load the local image curr_icon = Fu. readdrawablefromlocal (home_activity.this, newsid + constant. save_news_icon_name + constant. save_img_suffix); imagecache. put (icon_url, new softreference <drawable> (curr_icon);} curr_item.put (constant. news_icon, curr_icon); // send the UI to handler to update message MSG = _ viewhandler. obtainmessage (); MSG. arg1 = constant. msg_list_img_ OK; MSG. sendtotarget ();} catch (exception e) {Throw new runtimeexception (e );}}});}

Java code

1. Handler code:

Handler code:

Java code

1. Handler _ viewhandler = new handler (){
   

Handler _ viewhandler = new handler (){

Java code

1. @ Override
2. Public void handlemessage (Message MSG ){
   
3. Switch (msg. arg1 ){
4. Case constant. msg_list_img_ OK:
   
5. // Update the UI
6. Adapter. notifydatasetchanged ();
7. Break;
8. }
9. Super. handlemessage (MSG );
10. }
11. };

@ Overridepublic void handlemessage (Message MSG) {Switch (MSG. arg1) {Case constant. msg_list_img_ OK: // update uiadapter. yydatasetchanged (); break;} super. handlemessage (MSG );}};

The previous figure: