1

「DynamicPage」スクリプトの一部であるページに次のスクリプトがあり、画像スライダー スクリプトを実行する関数を呼び出す部分を追加しました。以前抱えていた問題を解決するためにここにいます。ページが読み込まれると一瞬の遅延を除いて、機能します。以下の画像は、私が何を意味するかのアイデアを提供します.

ページが読み込まれると

どのように見えるべきか/約0.5秒後にどのように見えるか

これがスクリプトです

$(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なしでWebページをロードする場合（古代の私は知っていますが、人々はまだそこにある古代のブラウザーでXPを使用しています）、それはあなたの「ページロードの例」で立ち往生するでしょう。

私の提案は、すべての冗長な追加の動的要素に適用する隠しcssクラスを用意することです。javaScriptなしで、またはあなたの場合は追加の画像フレームなしで隠したいもの。そうすることで、これまでに見た場違いの影響を防ぐだけでなく、Webサイトの下位互換性を確保できます。特に、クライアントのターゲットオーディエンスが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 に答える