javascript - 页面在 Chrome、Firefox 和 IE 中运行良好，但在 iPad Safari 上会导致闪烁或崩溃

Question

我正在尝试使用 jQuery 和 CSS3 创建一个内容 slider 。

This是我的代码。页面在 Chrome 中运行良好，在 Firefox 中几乎正常，在 IE 中正常运行(但几乎没有效果)。

但它在 iPad Safari 中不起作用...

当页面在 iPad Safari 中完成加载时，页面开始闪烁(持续，永远不会完成)，然后浏览器崩溃!

但是我找不到my slider的哪一部分有问题，我不知道到底是什么问题...

抱歉，如果我的代码很乱，但我找不到问题所在，所以我不能做一个更简单的例子......

---

更新

我的代码有 window.resize jQuery 事件，我在里面调用 CorrectPages()。

我已将此代码放在该事件的第一行:alert("windowResize"+ window.innerWidth + ", "+ window.innerHeight);

在 PC 中，在我调整窗口大小之前没有警报。但在 iPad 中，警报在页面加载后开始。这些是 iPad 上的消息:

windowResize1767 , 1074
windowResise1767 , 2078
windowResize2099 , 4136
windowResize2099 , 8355
windowResize2099 , 17004
windowResize2099 , 34735
...

---

更新 2

正如 ahmadali 所说，现在我们解决了之前的问题。 This is my fixed code .但是现在，还有另一个问题:当页面加载时，Safari 告诉错误的 window.innerWidth 和 window.innerHeight。

当页面加载时，它暂时看起来是正确的，但随后就发生了变化。这是片刻之后的结果:

你的想法是什么？

Answer 1

马赫迪

我无法发现任何明显的问题，但效率可能是个问题。大量改进是可能的。

这里有一些通用的提示:

• 将全局变量 beginX、beginY 等放在 $(document).ready(function(){...}) 闭包中.
• 尽量减少查找 DOM 节点的需要 - 缓存 jQuery 对象并尽可能使用方法链接。
• .removeclass() 将删除多个空格分隔的类。无需单独声明
• $("#d_page"+ i + "#overlay") 令人担忧。 ID 应该是唯一的，那么为什么不是 $("#overlay") 或 $("... .overlay")？
• 让 jQuery 方法 .eq() 和 .not() 做一些艰苦的工作。
• 给页面 class="page"。让 $pages = $(".page")，那么 $("#d_page"+ i.toString()) 应该简化为 $pages.eq (i)。许多这种类型的表达式会简化。

通过逐步改进，我设法将函数 correctPages() 从大约 170 多行减少到仅 26 行。

这就是我的结局:

function correctPages() {
    var $pages = $(".page"),//relies on pages having class="page"
        prefix = (isLandscape(window.innerWidth, window.innerHeight)) ? 'd_landscape_activepage_' : 'd_portrait_activepage_',
        classes = ["whitebackground", prefix+"1", prefix+"2", prefix+"3", prefix+"4"].join(' '),
        $np = [$pages.eq(currentPage), $pages.eq(nextPage(currentPage)), $pages.eq(nextPage(nextPage(currentPage))), $pages.eq(nextPage(nextPage(nextPage(currentPage))))];
    $pages.removeClass(classes);
    $pages.find(".overlay").css({top:0, opacity: 0.6});//relies on overlays having class="overlay"
    $pages.not($np[0]).not($np[1]).not($np[2]).addClass(prefix+"1");
    $pages.not($np[2]).removeClass(prefix+"5").addClass("transition");
    $pages.eq(prevPage(currentPage)).addClass(prefix+"2");
    $np[0].addClass(prefix+"3").find(".overlay").css("opacity", "0.1");
    $np[1].addClass(prefix+"4");
    $np[2].addClass(prefix+"5");
    $np[isNext ? 2 : 3].removeClass("transition");
    setTimeout(function() {
        $np[2].addClass("transition");
    }, 100);
    $(".articlecontent").css("background", "rgba(250,250,250,0)");
    $(".d_landscape_activepage_3 .articlecontent").css("background", "rgba(250,250,250,1)");
    $(".d_portrait_activepage_3 .articlecontent").css("background", "rgba(250,250,250,1)");
    correctDivs();
    $("#d_pagefix").css("opacity", "0");
    setTimeout(function() {
        $np[0].find(".overlay").css("top", "10000px");
    }, 400);
}

此代码未经测试，因此可能不是 100% 正确，但应该为您提供一些关于如何改进它的线索。

编辑

作为调整大小事件持续重新触发的解决方法，请尝试动态分离和重新附加调整大小处理程序。

替换:

$(window).resize(function() {
    correctPages();
});

与;

function attachResizeHandler() {
    $(window).on('resize', resizeHandler);
}
function resizeHandler() {
    $(window).off('resize');
    correctPages();
    setTimeout(attachResizeHandler, 600);
}

我选择 600 毫秒是因为它比 correctPages 或 checkhash 代码中的最长超时时间稍长。根据触发不需要的调整大小事件的确切原因，您可能会少一些。

在代码的其他地方，替换 :

的所有实例

`correctPages();` 

与:

`resizeHandler();`

resizeHandler 的初始附加将在 checkhash(); 在页面加载时调用时发生。