StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHeavyweight Jquery slideshows are slow in desktops and crash on ipad 2, android ics and iphone
text
Body
copied!<p>I am building my portfolio site (have a look here ...) </p> <p><a href="http://www.tripleagent.co.uk/projects.html" rel="nofollow">http://www.tripleagent.co.uk/projects.html</a></p> <p>And I am using Jquery with jquery.cycle.all.js. I added about 200 slides with my work dated many years back and a few vimeo videos with fitvid.js (it resizes the videos to fit in a responsive design). My problem is that the page is slow on a workstation computer (i7 ivy bridge and chrome) and it crashes on ipad, android and iphone. I am new on jscript and html5 so I am not sure what is going wrong. </p> <p>With my limited experience I believe that its running out of memory or that the slower machines can't handle the fade animations simultaneously. I use a typical setup for the slideshow </p> <pre><code>$("#slideshow").cycle({ fx:'fade,', speed: 1000, slideExpr:'.slide', slideResize: 0, timeout: 7000, pause: 1, //sync: true, autostop: false, pager: '#nav', next: '#slideshow', pagerEvent: 'mouseover', fastOnEvent: true , pagerAnchorBuilder: function(idx, slide) {return '<li><a href="#"><img src="'+slide.src + '"/></a></li>'; }, after: captionsAlt , }); </code></pre> <p>What should I do ? I can break up the page in two and it will probably work but i was thinking that there must be a way to optimize the page instead. Any suggestions? Is there any mistake, a bug or a bad design idea in the first place ? </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload