Question

我正在尝试为我的音乐创建一个CD封面组合。

目前，我的投资组合页面会在初始页面加载时加载我相册中的所有内容。内容包含在隐藏的div中。

当您点击相册时，内容会向下滚动并在使用.slideToggle()重新点击时关闭。查看网站here

我担心的是，我希望页面加载速度更快，而且只有内容才能被调用任何帮助将不胜感激。

我制定了一个测试场景：

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

Answer 1

该网站非常慢！这可能是因为代码重复以及您分配的事件数量。我们可以压缩您的代码，然后使用on委托减少事件数量。

在使用此功能之前，您需要更新您的jQuery（您当前使用的是1.3，您需要在至少 1.7处开启（就在{{1}时） }已添加））。

试试这个：

on

Answer 2

好吧，我找到了解决方案。它确实需要相当多的摆弄，mattytommo的回答让我走上正轨。所以，再次感谢matty。

我最后编写了一个函数（）并使用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的类，然后它不能打开。因此，将类.selected添加到我点击的相册并打开以下albumContent div。“

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

<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函数中。

将外部html加载到同一个类的多个div中

2 个答案: