3

我正在尝试使用 jQuery 和 CSS3 创建内容滑块。

这是我的代码。页面在 Chrome 中运行良好，在 Firefox 中几乎可以正常运行，并且在 IE 中可以正常工作（但几乎没有效果）。

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

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

但是我找不到我的滑块的哪个部分有问题，我不知道问题到底是什么......

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

更新

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

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

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

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

更新 2

正如 ahmadali 所说，现在我们解决了之前的问题。这是我的固定代码。但是现在，还有另一个问题：当页面加载时，Safari 会报错window.innerWidth并且window.innerHeight.

当页面加载时，它看起来是正确的，但随后，它发生了变化。这是片刻之后的结果： 在此处输入图像描述

你的想法是什么？

4

2 回答 2

3

马赫迪，

我看不出任何明显的东西，但效率可能是个问题。一大堆改进是可能的。

以下是一些通用指针：

  • 将 globalsbeginX等beginY放在$(document).ready(function(){...})闭包内。
  • 尽量减少查找 DOM 节点的需要 - 缓存 jQuery 对象并尽可能使用方法链。
  • .removeclass() 将删除多个空格分隔的类。无需单独声明
  • $("#d_page" + i + " #overlay")令人担忧。ids 应该是唯一的，为什么不呢$("#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% 正确，但应该为您提供一些关于如何改进它的线索。

编辑

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

代替 ：

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

和 ;

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

我选择了 600 毫秒，因为它比正确页面或校验哈希代码中的最长超时时间稍长。根据触发不需要的调整大小事件的确切原因，您可能会侥幸逃脱。

在代码的其他地方，替换所有实例：

`correctPages();`

和 ：

`resizeHandler();`

resizeHandler然后在页面加载时checkhash();调用初始附件。

于 2012-08-17T01:52:40.443 回答
2

好吧，我和 Mahdi 用 iPad 对代码进行了很多测试，最后我们明白问题出在JqueryMobile. 我有这个代码

$(window).resize(function() {
  $('#log').append('<div>Handler for .resize() called.</div>'+$(window).height()+","+$(window).width());
});​

并且当我在 iPad 中不添加引用的情况下运行它时JqueryMobile，页面不会更改，并且页面中没有添加任何内容（代码）。

JqueryMobile但是当我在 iPad 中添加引用来运行它时，它总是添加新的页面大小（代码）。

我认为JqueryMobile对于多平台网络程序员来说，这是一个非常重要的错误。我在这里报告了。

于 2012-08-17T04:48:38.733 回答