jQuery延遲觸發功能

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

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'); 
});

來源

2012-05-05 Sam T

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

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

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

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

$(function() { 

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

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

來源

2012-05-05 17:02:19

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

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

來源

2012-05-05 19:38:57

你問題不是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

來源

2012-05-06 02:27:37 PicoCreator

jQuery延遲觸發功能

回答

相關問題