如何在 Magento 中使用 head.js 或 labjs 等 JavaScript 加载器

发布于 2024-10-29 17:12:12 字数 240 浏览 6 评论 0原文

Magento 立即附带了六个以上的 JavaScript 库，这些库对本已很麻烦的加载时间没有任何帮助。有没有人能够成功地在 Magento 中使用像 head.js 或 labjs 这样的脚本加载器，以便它们可以异步加载？我一直在尝试但无法让它发挥作用。

似乎页面上的内联脚本在加载库之前就已触发。我知道 head.js 有一个像 head.ready 这样的函数来告诉脚本执行，但是有很多内联脚本，将其添加到整个站点中的每个事件中是不切实际的。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

何止钟意 2024-11-05 17:12:13

对于内联脚本，有一个编程解决方案。

您可以编写一个观察者，绑定到 core_block_abstract_to_html_after 或 controller_action_layout_render_before 事件，这些事件在输出渲染的 HTML 之前立即触发。在 Observer 中，您可以使用 preg_replace 在每个

它会增加渲染时间的一小部分，但我怀疑它会少于下载库的延迟。如果您使用全页缓存，则该函数只会被调用一次。

您可以使用内置的 Magento Profiler 来测试影响。至少值得一试。

HTH，
京东

回复收藏 0 原文

不语却知心 2024-11-05 17:12:13

好吧，我为此使用jquery。而且效果很好。
您所要做的就是发出一个返回脚本的 ajax 请求，然后使用 eval 评估脚本。您可以为此编写自己的函数，但 jquery 已经有一些不错的方法。
对于单个脚本，$.getScript 函数效果很好。它基本上是 $.ajax 函数的扩展，指定您正在请求脚本。语法是这样的：

$.getScript('my_script_url',function(){
    // do whatever needs to be done after the script loads
    alert('my script was asynchroniously loaded');
});

如果你想通过ajax添加更多脚本，jquery有一个neet方法可以做到这一点：

$.when(
    $.getScript("/script_1.js"), 
    $.getScript("/script_2.js"), 
    $.getScript("/script_3.js")
    // ...
    //$.getScript("/script_n.js")
).then(
    // on succes
    function(){
        alert('good to go!');
    },
    // on failure
    function(){
        alert('loading failed. one or more scripts encountered a problem :(');
    }
);

well, i use jquery for this. and it works great.
All you have to do is to make an ajax request that returns the script and then evaluate the script using eval. You can write your own function for this, but jquery already has some nice approaches.
For single scripts, the $.getScript function works well. It's basically an extension of the $.ajax function that specifies that you are requesting a script. the syntax is like this :

$.getScript('my_script_url',function(){
    // do whatever needs to be done after the script loads
    alert('my script was asynchroniously loaded');
});

If you have more scripts that you want to add through ajax, jquery has a neet way of doing this :

$.when(
    $.getScript("/script_1.js"), 
    $.getScript("/script_2.js"), 
    $.getScript("/script_3.js")
    // ...
    //$.getScript("/script_n.js")
).then(
    // on succes
    function(){
        alert('good to go!');
    },
    // on failure
    function(){
        alert('loading failed. one or more scripts encountered a problem :(');
    }
);

回复收藏 0 原文