我正在尝试使用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.innerWidth
和window.innerHeight
错误。页面加载后,它看起来会暂时正确,但是随后会更改。这是片刻之后的结果:
你有什么想法
最佳答案
马赫迪
我看不到任何明显的东西,但效率可能是一个问题。大量改进是可能的。
以下是一些一般性提示:
beginX
,beginY
等放入$(document).ready(function(){...})
闭包内。 $("#d_page" + i + " #overlay")
令人担忧。 id应该是唯一的,为什么不使用$("#overlay")
或$(".... .overlay")
? .eq()
和.not()
做一些艰苦的工作。 $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();
的初始附件。