2

自分の音楽の CD カバーのポートフォリオを作成しようとしています。

現在、私のポートフォリオ ページは、最初のページの読み込み時にアルバム内のすべてのコンテンツを読み込みます。コンテンツは非表示の div に含まれています。

アルバムをクリックするとコンテンツが下にスクロールし、 を使用して再度クリックすると閉じます.slideToggle()。サイトはこちら

私の懸念は、ページの読み込みを高速化し、要求されたときにコンテンツのみを読み込みたいということです。
どんな助けでも大歓迎です。

テストシナリオを作成しました：

<!doctype html>
<html>
    <title>jQuery external load test</title>

    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
        <style type="text/css">
            #container {
                width: 80%;
                margin: 0 auto;
                margin-top:;
            }
            .albumThumb {
                float: left;
                position: relative;
                margin: 5px;
                height: 150px;
                width: 150px;
                background-color: purple;
            }
            .albumThumb:hover {
                opacity: 0.8;
                filter:alpha(opacity=80);
            }
            .albumContent {
                display: none;
                width: 100%;
                float: left;
                position: relative;
                padding: 20px;
                color: #333;
                background-color: #eee;
                border: 1px solid #ddd;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <!-- Album #1 -->
            <div class="albumThumb"></div>
            <div class="albumContent"></div>
            <script type="text/javascript">
                $(document).ready(function() {
                    $('.albumThumb').click(function() {
                        // Name content variable
                        var album = 'album-page';
                        var url = 'http://mysite.com/' + album + ' #project-info';
                        var content = $(this).nextAll('.albumContent:first');

                        // Load/Unload div content
                        if (content.is(':visible')) {
                            content.slideUp(500);
                            content.html('');
                        } else {
                            content.text('Loading...', function() {
                                content.load(url).content.slideDown(500);
                            });
                        }
                    });
                });
            </script>
            <!-- Album #2 -->
            <div class="albumThumb"></div>
            <div class="albumContent"></div>
            <script type="text/javascript">
                $(document).ready(function() {
                    $('.albumThumb').click(function() {
                        // Name content variable
                        var album = 'album-page';
                        var url = 'http://mysite.com/' + album + ' #project-info';
                        var content = $(this).nextAll('.albumContent:first');

                        // Load/Unload div content
                        if (content.is(':visible')) {
                            content.slideUp(500);
                            content.html('');
                        } else {
                            content.text('Loading...', function() {
                                content.load(url).content.slideDown(500);
                            });
                        }
                    });
                });
            </script>
        </div>
        <!-- End Container -->
    </body>

</html>
4

2 に答える 2

0

そのサイトは本当に遅いです！おそらく、コードの重複と、割り当てたイベントの量が原因です。コードを要約し、onデリゲートを使用してイベントの数を減らすことができます。

これを使用する前に、jQuery を更新する必要があります (現在は 1.3 を使用しています。少なくとも1.7 を使用する必要があります (on追加されたとき))。

これを試して：

$(function() {
    $('.albumThumb').on("click", function() {
        // Name content variable
        var album = 'album-page';
        var url = 'http://mysite.com/' + album + ' #project-info';
        var content = $(this).nextAll('.albumContent:first');

        // Load/Unload div content
        if (content.is(':visible')) {
            content.slideUp(500);
            content.html('');
        } else {
            content.text('Loading...', function() {
                content.load(url).content.slideDown(500);
            });
        }
    });
});
于 2013-03-28T20:51:14.717 に答える
0

さて、私は解決策を見つけました。それにはかなりの手間がかかり、mattytommoの答えは私を正しい軌道に乗せました。それでは、ありがとうございます。

私は 1 つの function() を作成し、onClick イベントを使用して変数名の変更を html から jQuery 関数に渡しました。新しいスクリプトは次のとおりです。

<script type="text/javascript">
$(function albumSlider() {
    $('.albumThumb').on("click", function() {
        // Name content variables
        // var album = *Gets content from html "onClick"
        var url = 'http://mysite.com/' + album;
        var thisAlbum = $(this);
        var content = thisAlbum.nextAll('.albumContent:first');

        // Load/Unload div content
        if (thisAlbum.hasClass('.selected')) {
            thisAlbum.removeClass('.selected');
            content.slideUp(500, function() {
                content.html('');
            });
        } else {
            thisAlbum.addClass('.selected');
            content.slideDown(500, function() {
                content.text('Loading...').load(url);
            });
        }
    });
});
</script>

if/else ステートメント内で .hasClass()、addClass()、および .removeClass() を使用しました。まるで、「クリックしたアルバムに既にクラス .selected がある場合、そのコンテンツは開いている必要があります。 .selected クラスを削除し、クリックされた divAlbumThumb に続く div.albumContent を閉じます. そうしないと、クリックしたアルバムに .selected のクラスがない場合、開いてはいけません. したがって、追加しますクリックしたアルバムにクラスを選択し、次の albumContent div を開きます。」

次に、選択した div.albumThumb に続いて外部アルバム コンテンツ (html) を div.albumContent に渡すために html を単純化しました。

<body>

<div id="container">


<!-- Album 1 -->

  <div class="albumThumb" onClick="javascript:album = 'album-1';"></div>

  <div class="albumContent"></div>

<!-- Album 2 -->

  <div class="albumThumb" onClick="javascript:album = 'album-2';"></div>

  <div class="albumContent"></div>



</div><!-- End Container -->

</body>

album-1 と album-2 は "var album = '';" で渡されるようになりました。JavaScript関数内。

于 2013-03-29T23:42:36.160 に答える