1

jquery を使用して、単純な Web サイトhttp://cone.hostei.com/index3.htmlを作成しようとしています。関数を使用してhtmlページをdivにロードしたいだけです.load()。問題は、関数 -$('.preloader').hide()および ( { opacity : 1 }) が、ページとその画像が div に完全に読み込まれる前に起動することです! どうすれば修正できますか？

$(window).load(function () {
 $('li a').click(function () { //event on click
    var toLoad = $(this).attr('href'); //get href of a li element
    $('.load-in').fadeOut('fast', loadContent);
    $('.loader').show(); //show the loader


    function loadContent() {
        $('.load-in').css({ //set opacity 0.3
            opacity: 0.3
        }).load(toLoad, hideLoad); //load html page, then callback
    };


    function hideLoad() {
        $('.load-in').fadeIn('fast',

        function () { //hide preloader and set opacity 1
            $('.loader').fadeOut('fast');
            $('.load-in').animate({
                opacity: 1
            });
        });
    };
    return false;
 });
});
4

2 に答える 2

1

jQuery コードを $(document).read() ハンドラー内に配置する必要があります。これにより、ページ内のすべての要素が読み込まれた後にコードが実行されるようになります。

jQuery API ページを参照してください: jQuery - .ready()

于 2013-04-10T02:46:36.020 に答える
0

コンテンツが表示された後に画像が表示されないように、画像が完全に読み込まれたことを検出する場合はload、要素に含まれるすべての画像にイベント ハンドラーをアタッチし、.load-inすべての画像が読み込まれるまで待機する必要があります。要素をフェードインし、読み込みインジケーターをフェードアウトします。

このようなもの (あなたのサイトのコードに基づく):

function loadContent() {
    var $loadIn = $('.load-in');

    $loadIn.css({ opacity : 0.3 }).load(toLoad , function () {
        var $images = $('img', $loadIn),
            imageCount = $images.length,
            loadedCount = 0;

            //wait on images before showing the content
            $images.on('load', function () {
                if (++loadedCount === imageCount) {
                    $images.off('load');
                    hideLoad();
                }
            });

           //make sure the content is still shown if images fails to load
           //or are very slow to load
           setTimeout(function () {
               if (loadedCount !== imageCount) {
                   $images.off('load');
                   hideLoad();
               }
           }, 5000);
    });   
};

ただし、知っておくべきことがいくつかあります ( http://api.jquery.com/load-event/から取得):

画像で使用する場合の load イベントの注意事項 開発者が .load() ショートカットを使用して解決しようとする一般的な課題は、画像 (または画像のコレクション) が完全に読み込まれたときに関数を実行することです。これには注意すべき既知の警告がいくつかあります。これらは：

  • クロスブラウザーで一貫して確実に動作しない

  • 画像の src が以前と同じ src に設定されている場合、WebKit で正しく起動しません。

  • DOM ツリーを正しくバブルアップしない
  • ブラウザのキャッシュに既に存在する画像の起動を停止することができます
于 2013-04-10T02:55:31.153 に答える