Question

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

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

Answer 1

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

$(function() {

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

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

Answer 2

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

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

Answer 3

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

事实上，如果你在没有javaScript的情况下加载你的网页（古代我知道，但人们仍在使用带有古代浏览器的XP），它会被困在你的“页面加载示例”中。

我的建议是拥有一个隐藏的css类，您可以将其应用于所有冗余的附加动态元素。您希望在没有javaScript的情况下隐藏的内容，或者在您的情况下隐藏其他图像帧。这样你不仅可以防止你看到的不合适的效果，还可以使网站向后兼容。特别重要的是，如果您的客户目标受众可能不是IT专家。

.preLoadHide {
    visibility:hidden;
}

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

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

请注意，我们还有很强的理由通过

引发延迟

$（function（）{...你的代码在这里......}）;

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

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

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

jQuery延迟触发功能

3 个答案: