我正在尝试使用 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
。
当页面加载时,它暂时看起来是正确的,但随后就发生了变化。这是片刻之后的结果:
你的想法是什么?
最佳答案
马赫迪
我无法发现任何明显的问题,但效率可能是个问题。大量改进是可能的。
这里有一些通用的提示:
- 将全局变量
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();
在页面加载时调用时发生。
关于javascript - 页面在 Chrome、Firefox 和 IE 中运行良好,但在 iPad Safari 上会导致闪烁或崩溃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11993993/