IOS development-detailed solution for loading and sliding a large number of images

Detailed solution for loading and sliding a large number of imagesToday, I would like to share with you the solutions for reading, loading, and sliding a large number of images in a private album. I would like to emphasize that programming is irrelevant to platform restrictions. For more information, click any small thumbnail on the thumbnail page and enter the short period of 1 second (and the next few seconds) of the full screen UI of the large HD image ), what happened. After clicking any thumbnail for the general idea process, 1. first, create a scrollview frame: Two scrollviews in size. A small one is used to scale a single image with a gesture, and the whole picture is loaded horizontally. 2. after creating the scrollview framework, load the Photo 3. everything is ready to jump to the page to display a large image to the user
When loading images, if there are more than 10 photos in the album, there is no technical challenge, but what if there are 300 photos? Crash directly? Or let the user wait for loading? This step requires splitting and optimization.

The scrollview framework needs to understand the API and move its mind. Here is a tip. Many people ask me how to implement the Black edge spacing between the photo and the photo:

# Define padding 20-(nsinteger) loadphotos {// clear previous photos for (uiview * V in [_ scrollview subviews]) {[V removefromsuperview];} workingframe = [[uiscreen mainscreen] bounds]; workingframe. origin. X = Padding; For (INT I = 0; I <int_total; I ++) {cgrect frame = workingframe; wqphoto * photoview = [[wqphoto alloc] initwithframe: frame]; [photoview setscroller: Self]; [photoview setindex: I]; wqalbumphoto * photo = [albumobject. _ photos objectatindex: I]; [Photo cleanthumbnail]; if (I = int_current) {// load the source image [photoview setimage: photo. oriimage]; [photoview setisload: Yes];} else if (int_current-10 <I & I <int_current + 10) {// load thumbnail near left and right [photoview setimage: photo. thumbnail4view];} [_ scrollview addsubview: photoview]; workingframe. origin. X = workingframe. origin. X + 2 * padding + workingframe. size. width;} // you can scroll through [_ scrollview setcontentsize: cgsizemake (workingframe. origin. x, workingframe. size. height/2)]; [_ scrollview setcontentoffset: cgpointmake (360 * int_current, 0)]; // load the remaining thumbnails loadthread = [[nsthread alloc] initwithtarget: Self selector: @ selector (loadimages) object: Nil]; return 0 ;}

If you want to use a low-resolution image, you do not need to load the original high-definition images of all the images as soon as possible. Save the low-resolution images for each image in advance and change the time with the space. First, load the low-resolution images of all images. When a user looks at an image, the original size of the high-definition without code is instantly loaded. The process is optimized:

Even in this case, when the number of photos reaches a certain level, the time required is not millisecond-level. The user experience cannot be satisfied, and the page jumps will still be choppy. Therefore, we want to use multiple threads to further split the task, and then execute the step of loading the low-resolution graph in the background while performing the redirection.



Through this split, you can achieve instant jump and experience satisfaction. However, when users slide between the left and right quickly during browsing, there is a high probability of a black screen, because the thread loading the low-resolution graph task may still perform a lot of Io operations and cannot keep up with it in time. To improve it, we need to re-break down the steps for loading low-resolution images and keep improving.
Within the range allowed by the page Jump Time, when loading the HD source image selected by the user, you can load as many low-resolution images as possible.





How can I load other low-resolution images? The user clicks the selected figure as the center to load the two sides, directly thinking that the loading of two threads should be one left and one right, and then think about the loading of both threads can actually be a loop, without the additional thread consumption.

-(BOOL)loadImages{    for (int i = int_current - 10, j = int_current + 10 ; !( i < 0 &&  int_total - 1 < j); --i, ++j) {        if (!(i < 0)) {            WQPhoto *photo_pre = [_scrollView.subviews objectAtIndex:i];            WQAlbumPhoto *photoPre = [albumObject._photos objectAtIndex:i];            [photo_pre setImage:photoPre.thumbnail4view];        }        if (!(int_total - 1 < j)) {            WQPhoto *photo_next = [_scrollView.subviews objectAtIndex:j];            WQAlbumPhoto *photoNext = [albumObject._photos objectAtIndex:j];            [photo_next setImage:photoNext.thumbnail4view];        }    }    return YES;}

Finally, try to reduce memory usage. the size of the original image is much larger than that of the low-resolution image. Therefore, when you read from one image to another, the current image is loaded as a large HD image of the original size, the original image is replaced with a low-resolution image. Although the number of reads and writes has increased, the memory has indeed saved a lot.

To be honest, many photo album apps on the market may experience choppy jumps when reading them ......


P.s.In the next summary, how can independent developers make profits without spending a penny on promotion:

Welcome