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的回答让我走上了正确的轨道。所以，再次感谢马蒂。

我最终编写了一个 function() 并将变量名称更改从 html 传递到 jQuery 函数，使用 onClick 事件，这是新脚本：

<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类，那么它一定没有打开。因此，添加类 .selected 到我单击的专辑并打开以下专辑内容 div。”

接下来，我简化了 html，使用它将外部专辑内容 (html) 传递到 div.albumContent 之后选择的 div.albumThumb：

<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>

专辑 1 和专辑 2 现在在“var album = '';”中传递 在javascript函数中。

于 2013-03-29T23:42:36.160 回答