2012-05-05 177 views
1

我的頁面中有以下腳本,它是「DynamicPage」腳本的一部分,我添加了一部分來調用函數來使圖像滑塊腳本運行。它在這裏解決我之前遇到的問題。它可以工作,除了頁面加載後延遲一秒。下面的圖片讓你知道我的意思。jQuery延遲觸發功能

As the page loads

What it should look like/what it looks like after about half a second

這裏的腳本

$(function() { 

    var newHash  = "", 
     $mainContent = $("#main-content"), 
     $pageWrap = $("#page-wrap"), 
     baseHeight = 0, 
     sliderInit = true, 
     $el; 

    $pageWrap.height($pageWrap.height()); 
    baseHeight = $pageWrap.height() - $mainContent.height(); 

    $("navbar").delegate("a", "click", function() { window.location.hash = $(this).attr("href"); return false; }); 

    $(window).bind('hashchange', function(){ 
     newHash = window.location.hash.substring(1); 
     if (newHash) { 
      $mainContent.find("#guts").slideUp(5, function() { 
       $mainContent.hide().load(newHash + " #guts", function() { 
        $mainContent.slideDown(5, function() { 
         $pageWrap.animate({height: baseHeight + $mainContent.height() + "px" }, function() { 
          $('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000}); 
         }); 
        }); 
        $("navbar a").removeClass("current"); 
        $("navbar a[href='"+newHash+"']").addClass("current"); 
       }); 
      }); 
     }; 
    }); 
    $(window).trigger('hashchange'); 
}); 
+0

不知道你是否試圖添加一個延遲,或者如果你想刪除一個半秒的延遲。 –

+0

刪除,對不起,如果我沒有說清楚。 –

+0

hmm ..我想知道是否半秒延遲真的是你的問題。你的問題是,當頁面重新加載..你看到一個圖片沿底部閃爍?在我看來,就像您在開啓幻燈片事件時您的DOM尚未準備就緒。 –

回答

0

我建議你覆蓋添加到頁面。比如說,位於頁面頂部的黑色/白色背景隱藏了其他所有內容。現在,當你的函數觸發時,將這個覆蓋層淡出並移除。

$(function() { 

var newHash  = "", 
    $mainContent = $("#main-content"), 
    $pageWrap = $("#page-wrap"), 
    baseHeight = 0, 
    sliderInit = true, 
    $el; 
       . 
       . 
       . 

$("#MY_OVERLAY").hide('slow'); 
}); 
0

在頁面加載完成後,您是否嘗試過使用滑塊觸發器?

$(document).ready(function() { 
    $(window).trigger('hashchange'); 
}); 
0

你問題不是javaScript問題,而是一個Html/CSS問題。

事實上,如果你要加載你的網頁沒有javaScript(古代我知道,但人們仍然使用XP與古代瀏覽器那裏),它會卡住在你的「頁面加載示例」。

我的建議是有一個隱藏的CSS類,它適用於所有多餘的附加動態元素。你想隱藏的東西沒有javaScript,或在你的情況下,額外的圖像框架。這樣,您不僅可以防止您看到的不合適的效果,還可以使網站向後兼容。尤其重要的是,如果您的客戶目標受衆可能不是IT專業人士。

.preLoadHide { 
    visibility:hidden; 
} 

這之後,當(如果)JavaScript是加載,執行下列操作,因爲您使用jQuery [之前或應用圖像幻燈片效果之後需要實驗]

jQuery(".preLoadHide").removeClass(".preLoadHide"); 

注意也有一個很強的原因,我們爲什麼通過誘導延遲

$(function(){... your code here ...});

在你的代碼的上下文中:這確保在加載圖像後執行javaScript,因爲當沒有加載任何內容時,腳本會崩潰/失敗/什麼都不做。因此你的0.5秒延遲。

[當你的頁面仍在加載時,實際上大多數圖像都是在瀏覽器中逐步加載的,當它們第一次出現時,它們實際上並不完整,更高分辨率的細節,我們有時並未意識到, res圖片是優化的一部分]

因此,隨着服務器加載時間不是你總是控制的東西,最好假設延遲總是在那裏。因此,使用它= P