Search jQuery

jQuery Forum

jquery cycle ipad memory limit

in Using jQuery Plugins • 8 years ago

I'm using jquery to create some large slideshows of large images (~50 images at 1000x500px each).

I found out that when viewing some of these large slidehows on the ipad, it would only load about 30 of the images and then not load any more because apparently mobile safari has a limit on how much image data it will load on a single page.

Can someone offer a suggestion on how to best approach this issue?

I thought about removing slides that aren't currently being shown, but from what I've read I can't do this without recreating the slideshow.

The other option I've considered is setting the images to a very small image initially and then updating the src attributes as the slideshow advances, but I'm not currently having luck with that, when i update the src attributes, it doesn't seem to do anything.

Thanks!

Replies(14)

malsup

Re: jquery cycle ipad memory limit

8 years ago

Your idea of getting around this problem is a good one, however you probably need to set cycle's 'height' and 'width' options and also set the 'fit' option to true. Use height and width to identify the specific size of the slides.

$('#slideshow').cycle({
width: '500px',
height: '500px',
fit: true,
fx: 'zoom',
// etc
});

jaredmoody

Re: Re: jquery cycle ipad memory limit

8 years ago

Thanks for the tip Mike, that was just the trick.

Cheers!

ducdesign..

Re: Re: jquery cycle ipad memory limit

8 years ago

I think I may be experiencing this issue also on my iPad, though your solution did not do the trick for me. I'm cycling through 39 JPGs averaging 200KB each, using the scrollHorz FX. The images not viewable on the iPad's Safari are sporadic.

It seems at first that the first slides load and the last few do not, but cycling through displays the JPGs here and there. I can always count on the last few in the cycle to not display, though.

Any ideas that may help me out? I would appreciate any input.

Here's the site: http://www.jordanlookbook.com/Jordan_Holiday_2010/ios/holiday_lookbook.html

Thank you in advance.

iodicdesi..

Re: jquery cycle ipad memory limit

8 years ago

Hi Mike,

I am developing an iPad web app and using Cycle for a couple of slideshows and have run into the same problem like Jared at the top. Here is the layout of the app: the homepage sports a six-slides slideshow (the images have ~1MB, in total) and a bar with a menu button. This is the code that calls Cycle for the homepage slideshow:

$('#slider').cycle({ fx: 'fade', timeout: 4000, speed: 1500, width: '1024px', height: '1024px', fit: true });

When you tap the About page link, the About page is loaded in with AJAX and it replaces the homepage. The slideshow on the About page has twelve slides and the images weigh in at about 1.3MB. Here is the code that starts the About slideshow right after it is loaded:

$('#aboutShow').cycle({ fx: 'fade', timeout: 4000, speed: 1500, width: '1024px', height: '1024px', fit: true, after: function() { $('#captions').html(this.alt); } });

Now, Safari generally crashes on the sixth or seventh slide. I have tried disabling the homepage slideshow and then the About slideshow crashes Safari on the tenth or eleventh slide.

The images are all 1024x1024 pixels and I have made them 50x50 in HTML, like it was suggested (I have done this for both slideshows) but it hasn't helped.

Do you have any idea how I might get around this problem?

Thanks!

Marko

P.S. I am using the 2.88 lite version of Cycle if that's of any significance. (Note that I have also tried with the full version – jquery.cycle.all.min.js – and still the app crashed.)

malsup

Re: jquery cycle ipad memory limit

8 years ago

Here's my suggestion:

http://www.malsup.com/jquery/cycle/ipad.html

View source.

jaredmoody

Re: Re: jquery cycle ipad memory limit

8 years ago

Mike, I noticed that your suggestion doesn't have the fit, height or width options like before, is that a change with cycle 2.88 that it doesn't need it anymore?

Also, in case it helps someone else or there's a better solution, I had an issue where slides that weren't loaded yet were getting shown, and so I wanted to check if the next slide was loaded before advancing and if not wait until it was. The problem I ran into was that when changing the src attr, the onload event wasn't re-triggered when the new image loaded.

How I solved this was to use a image url that doesn't exist for the unloaded state, which did cause that event to fire.

I'll have to test to see if the same thing happens with the method above.

iodicdesi..

Re: Re: jquery cycle ipad memory limit

8 years ago

Hi Mike,

Thanks for replying. Calling the plugin like you showed in the demo has stopped the crashes. However, at the risk of sounding familiar, I am again having the same problem as Jared. :( I am experiencing the problem only after I navigate to the page for the second time. I go to the page for the first time and it works as it should. When I navigate away from it and back the slideshow starts and the images fade in/out properly but the captions go wild. It seems like there are two sets of captions: one that fades faster than the images and then switches to the appropriate one when the fade in/out of the image is done; then again it goes through a couple of captions quickly before the next image fade.

I wanted to add the nowrap option so that the slideshow stops at the last slide but it seems like I have to use a more feature-rich version of Cycle for that. Then, I encountered another problem: the slideshow shows only the first two images (the ones that have the proper src attributes in HTML) and the others are just black (like my small dummy image). That happens with both jquery.cycle.all.min.js and jquery.cycle.lite.min.js.

Here is my HTML code:

<div id="aboutShow">
<img src="images/about-0-6.jpg" data-img="images/about-0-6.jpg" alt="There are a few things you should know about me;<br>I want to make sure that I'm the photographer you're looking for.">
<img src="images/about-1.jpg" data-img="images/about-1.jpg" alt="I am...a husband, and a father.">
<img src="images/dummy.jpg" data-img="images/about-2.jpg" alt="I am...addicted to Android.">
<img src="images/dummy.jpg" data-img="images/about-3.jpg" alt="I am...addicted to coffee.">
(etc)
</div>
<p id="captions"></p>

And the JS:

(function() {
var slideshow = $('#aboutShow').cycle({
timeout: 4000,
speed: 1500,
before: onBefore,
after: onAfter,
nowrap: 1
})
function onBefore(curr,next,opts) {
var load = $(next).next(), src;
if (load.length == 0)
load = slideshow.find('img:eq(0)');
load.attr('src', load.attr('data-img'));
}
var count = 0;
function onAfter(curr,next,opts) {
$('#captions').html(this.alt);
if (!count++)
return;
$(curr).attr('src','images/dummy.jpg');
}
})()

Mike, please help! :)

Marko

iodicdesi..

Re: Re: jquery cycle ipad memory limit

8 years ago

I've got an update: managed to sort out the problem with using jquery.cycle.all.min.js or jquery.cycle.lite.min.js. Turns out that the dimensions have to be specified:

var slideshow = $('#aboutShow').cycle({
timeout: 4000,
speed: 1500,
before: onBefore,
after: onAfter,
nowrap: 1,
width: '1024px',
height: '1024px',
fit: true
})

By keeping the slideshow from wrapping, I have sorted out the captions problem I mentioned in the previous comment. As soon as the nowrap option is removed, the captions start acting up again. :( Luckily, this particular slideshow is meant to stop on the last slide.

malsup

Re: jquery cycle ipad memory limit

8 years ago

Updated my demo to display captions but I'm not seeing any issues when the slideshow wraps.

http://www.malsup.com/jquery/cycle/ipad.html

iodicdesi..

Re: Re: jquery cycle ipad memory limit

8 years ago

Thanks for taking the time to look into it, Mike. I really appreciate it. The only thing that I can think of is that AJAX is messing with the timing somehow. But, like I said, I need the slideshow not to wrap so that's not an issue now.

There is one other thing I wanted to ask you about and then I won't bug you anymore, promise!

Is there a way to make the slideshow advance by swiping the screen on the iPad? I can detect swipes but I am not sure how (and if) I can make it go to the previous or next slide. Is it possible to do this?

Again, thank you for all your help.

malsup

Re: jquery cycle ipad memory limit

8 years ago

$('#slideshow').cycle('prev');

$('#slideshow').cycle('next');

iodicdesi..

Re: Re: jquery cycle ipad memory limit

8 years ago

Hi Mike,

Thanks you so much! This worked, here is my implementation:

addSwipeListener(swiper, function(e) {
if (e.direction == 'right') {
$('#aboutShow').cycle('prev');
}
else if (e.direction == 'left') {
$('#aboutShow').cycle('next');
}
});

Of course, there is a problem: the fix that you proposed to stop Safari from crashing seems to be messing with the next & prev methods. If I go to the next slide manually, everything works well. But, when I go back, the captions get displayed but the images are the dummy.jpg from the src attribute. After going back, moving forward also gets jacked up...

Is there a way to plug the onBefore & OnAfter functions as callbacks to the next & prev methods (or a similar solution)?

Thanks!

malsup

Re: jquery cycle ipad memory limit

8 years ago

The before and after callbacks are always called, regardless of how the transition is started. You just need to modify my demo a little bit. It throws away the current image after it transitions out, that's a bit too aggressive.

iodicdesi..

Re: Re: jquery cycle ipad memory limit

8 years ago

Thanks for replying. :)

So I managed to make the previous slides appear when swiping to the left by using the following after callback:

function onAfter(curr,next,opts) {
$('#captions').html(this.alt).fadeIn(300);
if (!count++) return;
}

That works fine, it displays the slides regardless of the swiping direction. However, the images remain in memory and eventually Safari crashes. Then I tried this:

function onAfter(curr,next,opts) {
$('#captions').html(this.alt).fadeIn(300);
if (!count++) return;
$(curr).prev().attr('src','images/dummy.jpg');
}

Watching the source in Firebug, the slide before the one that was just faded out would get its src attribute changed back to the small image. But the previous slides started acting up again when moving back through the slideshow.

I have also tried using the fwd variable to check if we are moving forward or back and then throw away the previous or next slide but it seems like the fwd represents the default direction of slideshow?

Am I missing something?

Top Reply

Response title

Attachments

jQuery Forum

jquery cycle ipad memory limit

Replies(14)

Re: jquery cycle ipad memory limit

Re: Re: jquery cycle ipad memory limit

Re: Re: jquery cycle ipad memory limit

Re: jquery cycle ipad memory limit

Re: jquery cycle ipad memory limit

Re: Re: jquery cycle ipad memory limit

Re: Re: jquery cycle ipad memory limit

Re: Re: jquery cycle ipad memory limit

Re: jquery cycle ipad memory limit

Re: Re: jquery cycle ipad memory limit

Re: jquery cycle ipad memory limit

Re: Re: jquery cycle ipad memory limit

Re: jquery cycle ipad memory limit

Re: Re: jquery cycle ipad memory limit

Statistics

Tags

Actions