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延迟触发功能

回答

相关问题