[iOS] Load a large images

[phuocle]

When you have a large images in your gallery, for example: 200 images, each image about 70K, so the total load is: 200x70=14,000k = 14 MB

Yeah .... but look at this link: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html,

And we can see some first images in the gallery, in this case I can see first 140 images (140x70 = 9800KB), and other images (141, 142, .... 200) I can't see it ? is this a bug ?

Thanks for a cool framework ......

[codecomputerlove]

Sorry I really don't understand what you are asking for here. PhotoSwipe lazy loads images on demand in i.e. It loads the large image as an when the user swipes to view. PhotoSwipe will not download 14MB worth of images before working.

Thanks for trying PhotoSwipe. Sorry I can't help further as I can't understand your issue.

[phuocle]

check my demo page at: http://baohay.phuocle.net/bug/index.html

• If you load this page in desktop browser, everything ok.
• But when load in real iOS Devices (mobile safari), I tested with my iPad and iPod, it can load images but it load from page 1 to page: 65/100. From page 66 to 100, it only show a loading icon, donot show image !

And let calculate 65(images)x100kb (each image have 100kb) = 6.5 MB, and get a maximum of resource load in page (reference Know iOS Resource Limits in the link of my first post. This page tell the maximum is 10MB, but I don't know why it stop at page 66.

Some google with these keywords: ipad AND image AND problem AND 6.5 i get a lot of topic talk about the limit of iOS device when loading images.

Done.

[codecomputerlove]

That's cool. Unfortunately I'm still not sure what you need me to do - I don't see this as being an issue with PhotoSwipe? I really recommend you minimize your images dynamically on the server to make them more efficient for mobile users - downloading 100KB images over 3G isn't fantastic. Look at using WURLF & ImageMagick. I also think swiping between 65 images is way to much to be a good experience for end users and I'd consider breaking your images into smaller more manageable galleries (not from a technical point of view but for a usability perspective)

As I said, PhotoSwipe lazy loads images on request. It then caches them so you get a smooth experience. Chances are that this caching is eating up the resource available. I can look at this a bit further but can't guarantee when or with what success at the moment.

Again sorry, but that's the best I can offer presently

[jadavbheda]

Can we have some mechanism by which we can ask photoswipe library to free resources it aquired? Like after every 10th photo just release the resources or reinitialize.

[codecomputerlove]

Why?

[jadavbheda]

Because using photoswipe demo page, I can load 7-8 images only on iPAD/iPOD. After 7-8 images it reaches 6.5MB browser cache limitation on iOS device and there after that I can not load any more images.

(Even I can not restrict Image size or album size, as user upload photos in their album.)

[codecomputerlove]

Hi, I get you thanks. However, your images must be quite large for the web. Any reason you are serving our 1MB images on a website? I also recommend you rescale your images to fit mobile device resolution.

[jadavbheda]

This is flickr type of application, where user upload their images and when required they can download them as well. Hence I really don't want to change resolution of images.

[codecomputerlove]

Hi, maybe you should provide a link to download the full size image? Sorry as this is for mobile devices, 1MB images are pretty huge for a web page. I'll add this request to our product back log. Unfortunately I'm unable to give any indications as to when / if this feature will be implemented. In the meantime, if you manage to get this added, it'd be great if you could provide the solution.

Regards

[phuocle]

Hi codecomputerlove, I just make some demo pages, could you view it in your iPad to test it.

• http://baohay.phuocle.net/bug/index.html used PhotoSwipe framework and have problem if we have a lot of images.
• http://baohay.phuocle.net/bug1/index.html used Jaipho framework and now it have problem with a lot of images like link above. But you can view the source code of this page in desktop browser and see this line: var SLIDE_MAX_IMAGE_ELEMENS = 80;, and again if you load this page in the iPad you can load to image 65/100, from image 66 to 100, it can not display.

Final the worked version can found here: http://baohay.phuocle.net/good/index.html and if you look at page source you can see I set this line: var SLIDE_MAX_IMAGE_ELEMENS = 10;

Now my gallery load all images, current my website used this framework because this framework fixed the issued loading large images in iOS.

Look this link for reference: http://www.jaipho.com/content/jaipho-052-javascript-history-patch

I think you should look at the source code of Jaipho used variable SLIDE_MAX_IMAGE_ELEMENS to see how Jaipho clean up the memory resources

Why i need PhotoSwipe, because it support Zoom, other platfrom (android, blackberry, ....) that Jaipho do not have.

Can you fixed this bug for next release version of PhotoSwipe

Thanks.

PS:
@jadavbheda, you can used the Jaipho framework and set this variable to 5 and your gallery load ok. (yes, you should used Jaipho until codecomputerlove fixed this bug for next release)

[codecomputerlove]

I still think your images are too large, I am having a look into this. I may post a new version for you to test. If anything I'm looking at how Zepto framework handles removing images from the cache. Thanks

[liyamahendra]

@codecomputerlove : I have even ran into this issue... How about using "div" tags to display image... My research shows that showing images inside "div" tag by setting the "background" attribute seems to somehow overcome the iOS Resource Limits.

Let me know your thoughts.

Thanks.

[codecomputerlove]

Hi liyamahendra, do you have any proof of this? I'm currently building v2.0 of PhotoSwipe and wouldn't mind some further tips with the memory management.

[liyamahendra]

Hi codecomputerlove,

Please refer to the following link:

http://stackoverflow.com/questions/2986039/ipad-iphone-browser-crashing-when-loading-images-in-javascript

It shows the results of efforts put by others in the same issue.

I am myself trying to modify the code of PhotoSwipe and test the feedbacks provided in this link, in order to evaluate the options. May be you can help me by pointing me the exact locations & files in PhotoSwipe Library where you may be creating "Image" objects and setting its "src" attribute value. This will help me speed up my tests and provide you with feedback.

By the way, I am highly impressed by the kind of work you guy(s) have had put into this library and I'd love to contribute to it by helping you in further development and maintenance. May be I can join & start with this current iOS issue or possibly you can suggest something which you think I can look into.

Let me know your thoughts.

Thanks,
Mahendra.

[codecomputerlove]

Hi Mahendra thanks for your kind words and enthusiasm!

PhotoSwipe has it's own internal array of image elements that is uses as a cache. Only three of these are ever "added" to the DOM at any one point in time. The cache loads as needed - so PhotoSwipe doesn't go off and download all your full size images immediately. My feeling is that we need to clear down this internal cache array and have a user defined "cache max size" (whether that be in kb or number of items) or something similar.

The cache array is the "fullSizeImages" property of the photoswipe class. This is an array of "full-size-image" classes. This class is responsible for loading an image from the server and raising an event when it's loaded. The actual loading of the image is handled by the 'slider-item-class'.

Any help would be great. At the moment I'm in the process of writing v2 of PhotoSwipe and the caching mechanism is likely to change as v2 is a complete re-write. It would be great if I could send you a zip of the latest version before we release it / when I've looked at the cache for you to test and validate that it works fine. Would you be up for that?

[liyamahendra]

Yes, I am up for it and would love to do the same.

By the way, I was looking into the code and did discover that, the setImages function actually initializes / sets the images in this.fullSizeImages. Now, I saw there is a function setFullSizeImage which in turn calls this.fullSizeImage.load() and finally calls the load() function. Inside this load() function, you seem to be creating an Image object and setting value of its src attribute.

I am not very sure as to whether I am on the right track, but this is what I have started to understand your code logic.

Please let me know your comments on the same. Looking forward to assist you.

Regards,
Mahendra.

[codecomputerlove]

Hi Mahendra. Truth be told I'd wait if I was you for the pre-release of v2 that I'll try and ship out to you for testing. It's a complete re-write, so the current version's code will be obsolete in a few weeks time!

Appreciate your offer for help, that's brilliant!!

Ste

[liyamahendra]

Thanks for the advice. I'll wait for the pre-release of v2 and then starting looking into the code.

Eagerly waiting to test...

Thanks.

[liyamahendra]

Hi,

Here is the proof of concept for the work-around for iOS Resource Limit which I was talking about. It shows the image by setting the background property. Test it by making a swipe gesture on the image.

Download Link: http://sharesend.com/rr332

(Its really very basic. I haven't concentrated more on layout or making it optimized.. I hope that won't matter :-) )

It contains an images folder which has images of on an average size 1.5 MB. Try it at your end, and let me know your comments.

Thanks.

[codecomputerlove]

Hi unfortunately our firewall blocks out sharesend.com at work, so I'll have to look later

ta

[liyamahendra]

Ok. Give it a try when you get a chance to test it.

Just to brief you, it has a total of 20 images which accumulates to a total of 29.3 MB. I tested it on iPad & iPod and it is working flawlessly as far as the loading & display is concerned.

Will wait for your feedback and test result.

Thanks,
Mahendra.

[codecomputerlove]

Great, I'm working on v2 caching now. Any chance you can upload it somewhere else?

[liyamahendra]

You mean the images ?

[codecomputerlove]

The whole example

[liyamahendra]

Here is the link to the repo:

https://github.com/liyamahendra/Workaround-for-iOS-Resource-Limit

Hope it helps.

Thanks.

[mrsln]

Hi! Is there any progress?