我必须加载一个对于显示正文并不重要的第三方脚本(为简单起见,它会在" .red" divs上添加红色背景)。
<script src="redify.js" async defer></script>
我需要在加载脚本后执行function myRedify(){ $(".red").redify(); }
。
脚本很大,需要很长时间(比如3秒)加载,但一旦完成,我需要看到我的.red
div变成红色。
<script src="redify.js" async defer onload="myRedify()"></script>
这是推荐的方法吗?
说明
redify.js
是我无法修改的第三方脚本答案 0 :(得分:0)
你的方法是有效的,并且它具有优点。推荐吗?也许。 你的方法有一些优点和一些缺点:
blueify.js
),则必须复制该机制。现在,您的代码通过myRedify
函数紧密耦合。您可以通过构建简单的require
策略来解耦它:
var libraries = {
redify: "redify.js",
blueify: "blueify.js"
};
var lib_bookkeep = {};
function require(library_name, callback) {
if (lib_bookkeep[library_name]) {
if (lib_bookkeep[library_name].status === "loaded") {
callback();
} else {
lib_bookkeep[library_name].elem.addEventListener("load", callback);
}
} else {
var script = document.createElement("script");
script.src = libraries[library_name];
script.addEventListener("load", function () {
lib_bookkeep[library_name].status = "loaded";
});
script.addEventListener("load", callback);
document.head.appendChild(script);
lib_bookkeep[library_name] = {
elem: script
status: "loading"
}
}
}
require("redify", function () {
$(".red").redify();
});
require("redify", function () {
$(".also-red").redify();
});
require("blueify", function () {
$(".blue").redify();
});
require("blueify", function () {
require("redify", function () {
$(".purple").redify().blueify();
});
});
这允许您扩展您拥有的库,并允许您任意使用它们。这是我推荐的方法。但是,如果您只有一次这样的实例,则可能会发现它与asynch/defer
和onload
一样。