我最近的任務是創建一個HTML驅動的網頁,將模擬基本的Flash轉換和動畫,這使我轉向jQuery,自然。該網站有四個不同的頁面,每個頁面都有其特定的背景和一小段文字。爲單頁網站優化jquery動畫
簡單嗎?顯然不適合我。當我將交互式模擬運行到批准狀態時,我遇到了動作緩慢的問題,僅針對顯示器超過18英寸的(驚喜,驚喜)Mac電腦。我運行測試的電腦在所有主流瀏覽器上都能很好地工作 - Chrome, IE9和FF。對於18英寸以上的Mac,然而,FF的效果最好,其餘的則非常糟糕。
我已經嘗試過手段和方法來優化jQuery代碼,甚至使用index.html頁面將所有圖像預加載到瀏覽器緩存中,然後將用戶重定向到實際網頁,所有這些都希望在那裏可能對處理時間的壓力較小。
不幸的是,沒有任何工作。
這是一個單頁面設置,這樣很可能只有助於低迷的主要因素之一,但它沒有解釋爲什麼它適用於個人電腦和18" 歲以下的Mac電腦的罰款。
在任何情況下,這裏是我的動畫代碼片段在負載元素和頁/部分之間的過境褪色:
$(document).ready(function(){
$("#home-button").click(function(){
$("#home").fadeTo(2000, 1);
$("#location").fadeTo(2000, 0);
$("#services").fadeTo(2000, 0);
$("#contact").fadeTo(2000, 0);
$("#bg-img-1").fadeTo(2000, 0);
$("#bg-img-2").fadeTo(2000, 0);
$("#bg-img-3").fadeTo(2000, 0);
$("#bg-img-4").fadeTo(2000, 1);});
$("#location-button").click(function(){
$("#home").fadeTo(2000, 0);
$("#location").fadeTo(2000, 1);
$("#services").fadeTo(2000, 0);
$("#contact").fadeTo(2000, 0);
$("#bg-img-1").fadeTo(2000, 0);
$("#bg-img-2").fadeTo(2000, 1);
$("#bg-img-3").fadeTo(2000, 0);
$("#bg-img-4").fadeTo(2000, 0);});
$("#services-button").click(function(){
$("#home").fadeTo(2000, 0);
$("#location").fadeTo(2000, 0);
$("#services").fadeTo(2000, 1);
$("#contact").fadeTo(2000, 0);
$("#bg-img-1").fadeTo(2000, 0);
$("#bg-img-2").fadeTo(2000, 0);
$("#bg-img-3").fadeTo(2000, 1);
$("#bg-img-4").fadeTo(2000, 0);});
$("#contact-button").click(function(){
$("#home").fadeTo(2000, 0);
$("#location").fadeTo(2000, 0);
$("#services").fadeTo(2000, 0);
$("#contact").fadeTo(2000, 1);
$("#bg-img-1").fadeTo(2000, 1);
$("#bg-img-2").fadeTo(2000, 0);
$("#bg-img-3").fadeTo(2000, 0);
$("#bg-img-4").fadeTo(2000, 0);});});
這裏是我的背景圖片的CSS樣式,並且具有調整大小和作物某些圖形元素根據瀏覽器的大小:
img.bg{
min-height: 100%;
min-width: 900px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index:-4;}
#bg-img-1,#bg-img-2, #bg-img-3, #bg-img-4{
opacity:0;}
img.d-4{
min-height: 100%;
min-width: 1024px;
width: 92%;
height: auto;
position: fixed;
top:0;
left:0;
z-index:-3;
opacity:0.3;}
img.d-5{
min-height: 100%;
min-width: 1024px;
width: 92%;
height: auto;
position: fixed;
margin-left:-50px;
z-index:-3;}
任何關於如何進一步優化和防止緩慢問題的幫助或意見非常感謝。
謝謝你們! :)