jquery - 重量级 Jquery 幻灯片在桌面上运行缓慢，在 ipad 2、android ics 和 iphone 上崩溃

Question

我正在建立我的作品集网站(看看这里......)

http://www.tripleagent.co.uk/projects.html

我正在将 Jquery 与 jquery.cycle.all.js 一起使用。我添加了大约 200 张幻灯片，其中包含我多年前的作品，以及一些使用 fitvid.js 的 vimeo 视频(它会调整视频大小以适应响应式设计)。我的问题是，该页面在工作站计算机(i7 ivy Bridge 和 chrome)上速度很慢，并且在 ipad、android 和 iphone 上崩溃。我是 jscript 和 html5 的新手，所以我不确定出了什么问题。

以我有限的经验，我相信它的内存不足或者较慢的机器无法同时处理淡入淡出动画。我使用典型的幻灯片设置

$("#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 ,
    });  

我该怎么办？我可以将页面分成两部分，它可能会起作用，但我认为必须有一种方法来优化页面。有什么建议么？首先是否存在任何错误、错误或糟糕的设计理念？

Answer 1

自从我问这个问题以来已经有几个月了。

我升级到了最新的jquery 1.9.1，cycle.all 3.0.4 我刚刚注意到Safari，IE9和mozilla不再有太大的问题了。这些视频在 android 4.1+ 和 IOS 中播放良好，但仍然有点重，并且在 vimeo 播放器顶部的触摸和滚动方面存在一些问题。但我已经在 vimeo 论坛上问过这个问题了。