1

我的页面中有以下脚本，它是“DynamicPage”脚本的一部分，并且我添加了一个部分来调用函数以使我的图像滑块脚本运行。它在这里解决了我以前遇到的问题。它可以工作，除了页面加载后会有一瞬间的延迟。下面的图片让您了解我的意思。

随着页面加载

它应该是什么样子/大约半秒后是什么样子

这是脚本

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

3 回答 3

0

您的问题不是 javaScript 问题，而是 Html/CSS 问题。

实际上，如果您要在没有 javaScript 的情况下加载您的网页（我知道，但人们仍在使用 XP 和古老的浏览器），它会卡在您的“页面加载示例”中。

我的建议是有一个隐藏的 css 类，您可以将其应用于所有多余的附加动态元素。你想隐藏的东西没有javascript，或者在你的情况下，额外的图像帧。这样，您不仅可以防止您看到的不合适的效果，还可以使网站向后兼容。如果您的客户目标受众可能不精通 IT，则尤其重要。

.preLoadHide {
    visibility:hidden;
}

之后（如果）加载 javaScript，请执行以下操作，因为您使用的是 jQuery [在应用图像幻灯片效果之前或之后需要实验]

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

请注意，我们通过以下方式引起延迟还有一个非常充分的理由

$(function() { ...您的代码在这里... });

在您的代码上下文中：这确保在加载图像后执行 JavaScript，因为当没有加载任何内容时，脚本将崩溃/失败/什么都不做，什么都不做。因此你的 0.5 秒延迟。

[由于您的页面仍在加载，实际上大多数图像是在浏览器中逐步加载的，当它们第一次出现时，它们实际上是不完整的高分辨率细节，我们有时只是没有意识到这一点，减少高分辨率图片是一部分优化]

因此，由于服务器加载时间不是您始终可以控制的，最好假设延迟始终存在。因此使用它=P

于 2012-05-06T02:27:37.647 回答
0

我建议您在页面上添加一个叠加层。比如说，位于页面顶部的黑色/白色背景隐藏了其他所有内容。现在，当您的函数触发时，将这个覆盖层淡出，然后将其移除。

$(function() {

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

$("#MY_OVERLAY").hide('slow');
});
于 2012-05-05T17:02:19.103 回答
0

您是否尝试过在页面加载完成后触发滑块？

$(document).ready(function() {
   $(window).trigger('hashchange');
});
于 2012-05-05T19:38:57.540 回答