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

This是我的代码。 Page在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.innerWidthwindow.innerHeight错误。

页面加载后,它看起来会暂时正确,但是随后会更改。这是片刻之后的结果:

你有什么想法

最佳答案

马赫迪

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

以下是一些一般性提示:

  • 将全局变量beginXbeginY等放入$(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%正确,但应为您提供一些有关如何改进它的线索。

    编辑

    作为永久重新触发resize事件的一种解决方法,请尝试动态分离并重新附加resize处理程序。

    更换:
    $(window).resize(function() {
        correctPages();
    });
    

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

    我选择了600毫秒,因为它比正确页面或checkhash代码中的最长超时时间稍长。根据触发意外调整大小事件的确切原因,您可能会少花钱。

    在代码的其他地方,替换以下所有实例:
    `correctPages();`
    

    与:
    `resizeHandler();`
    

    当在页面加载时调用resizeHandler时,就会出现checkhash();的初始附件。

    10-05 20:53
    查看更多