1

有一个网站有一个index.html主页（带有<html><head>...）和类似gallery.html,的页面contacts.html，但只有<div>容器和没有<html><head>....

所以，当我点击index.html链接时contacts.html会发生什么：

$('.contacts').click(function(e) {
    e.preventDefault();
    $('#content').load('contacts.html', function() {
        .....
    });
});

问：我应该如何为clickon之类的任何事件构建或组织 javascript 代码contacts.html？

例如：

[1] 我可以在contacts.htmljavascript 代码上编写，例如：

<script type='text/javascript'>
$(function() {
    $('.anyClassOnContactsHtml').click(function(e) {
        .....
    });
});
</script>

但正如我猜想的那样，每次我加载contacts.html它时都会再次读取函数，这就是为什么网站的速度和性能可能较低的原因，因为我在每个页面上都有 50 多个点击事件。

[2] 我可以写index.html代表：

<script type='text/javascript'>
$(function() {
    $('#content').on('click', '.anyClassOnContactsHtml', function(e) {
        .....
    });
});
</script>

它可以工作，并且浏览器读取点击功能 1 次，但有 100 多个点击功能有 2-3 秒（！）延迟，所以它工作得非常慢。

为了更快地工作，我应该而不是#content写离我更近的容器.anyClassOnContactsHtml，但我不能，因为index.html只有#container.

那么，我该怎么办？还是有其他方法来绑定事件？关于网站性能的任何提示？谢谢你。

4

4 回答 4

0

Is something like this really that slow?? I would say its should be okay!

<script type='text/javascript'>
$(function() {
    $('.contacts').click(function(e) {
        e.preventDefault();
        $('#content').load('contacts.html', function() {
            $('#content_of_loaded').on('click', '.anyClassOnContactsHtml', function(e) {
                .....
            });
         });
    }); 
});
</script>

Maybe you could also try this:

<script type='text/javascript'>
    $(function() {
        $('a').click(function(e) {
            e.preventDefault();
            var site = $(this).attr("href");
            $('#content').load(site, function() {
                $('#sub_content').on('click', '.anyClassOnContactsHtml', function(e) {
                    .....
                });
             });
        }); 
    });
</script>

and also for your subcontent links you could do this maybe..

function loadContent(site) {
    $('#content').load(site, function() {
        $('#sub_content').on('click', 'a', function(e) {
            e.preventDefault();
            loadContent($(this).attr("href"));
        });
    });
}
$(function() {
    $('a').click(function(e) {
       e.preventDefault();
       loadContent($(this).attr("href"));
    }); 
});

but i didnt test it, so might be wrong :)

于 2013-07-20T23:23:01.717 回答
0

我认为你要获得任何运气性能优化的唯一方法是，如果你重构一些点击函数来组合它们，并通过添加更多方法参数、开关语句等使它们更具多功能性......最有效那么方法是将它们全部绑定到#content，因为每次URL更改时都不必重新加载它们。数据属性可以极大地帮助解决这个问题。如果您花时间正确地做到这一点，您甚至可以将所有代码重构为一个事件处理函数。

像这样的函数的一个非常人为的例子是：

$('#content').on('click', 'a, span, input', function(e) {
    var tagName = $(e.target).prop('tagName');
    switch (tagName) {
        case 'a':
            processAnchorEvents();
            break;
        case 'span':
            processSpanEvents();
            break;
        case 'input':
            processInputEvents();
            break;                 
    }
});
于 2013-07-20T23:05:25.300 回答
0

1）您实际上可以通过这种方式调用子元素。

${"#content .anyClassOnContactsHtml").click(function() { });

2）看看：http: //developer.yahoo.com/yslow/。例如，将<script>标签放在底部<body> </body>将使页面的其余部分加载得更快。

安装插件并在您的页面上运行测试。

于 2013-07-20T23:20:19.347 回答
0

当您load()满足时，加载的脚本标签中的任何代码都将被完全忽略，因此它对 javascript 性能没有影响。

问题可能是加载内容的方式。确保您没有每次都重新绑定点击功能。这是一些示例代码：

<script type='text/javascript'>
$(function() {

    $('.contacts').click(function(e) {
        e.preventDefault();
        $('#content').load('contacts.html', function() {
            // DO NOT REBIND CLICK EVENTS HERE
        });
    });

    // The following should only be done ONCE
    $('#content').on('click', '.anyClassOnContactsHtml', function(e) {
        .....
    });
});
</script>
于 2013-07-20T23:21:27.087 回答