マハディ、
明らかなことは何もわかりませんが、効率が問題になる可能性があります。大量の改善が可能です。
ここにいくつかの一般的な指針があります：
- グローバル
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();`
と ：
`resizeHandler();`
ページの読み込み時にが呼び出されると、の最初のアタッチメントがresizeHandler発生します。checkhash();
