如何结合两个初始化函数?

Question

我一直在努力加快页面加载速度。我有两个延迟脚本来最小化加载时间并提高性能。

问题在于只有最后一个函数可以工作。 例如，如果"imgDefer"在最后一个，则只有图像会加载到首页上。与"vidDefer"相同，如果最后，只有视频会加载，而图像不会

我不知道如何将这两个 init() 结合起来。我不擅长javascript。 这些是代码：(我将这些代码放在页脚区域)

视频

<iframe src="" frameborder="0" allowfullscreen="allowfullscreen" data-src="https://www.youtube.com/embed/xxxxxx"></iframe>

图像

<img class="img-responsive" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="imagesrource" alt="">

视频脚本

function init() {
var vidDefer = document.getElementsByTagName("iframe");
for (var s = 0; s < vidDefer.length; s++) {
if(vidDefer[s].getAttribute('data-src')) {
vidDefer[s].setAttribute('src',vidDefer[s].getAttribute('data-src'));
}
}
}
window.onload = init;

图像脚本

function init() {
var imgDefer = document.getElementsByClassName("img-responsive");
for (var i = 0; i < imgDefer.length; i++) {
if (imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
}
}
}
window.onload = init;

Answer 1

所以基本上听起来像是您希望能够在触发window.onload事件时运行多个函数。

您可以创建两个单独的函数，如下所示：

function runVideoScript() {
var vidDefer = document.getElementsByTagName('iframe')
// ...
}
function runImageScript() {
var imgDefer = document.getElementsByClassName('img-responsive')
// ...
}

然后，您可以创建一个init函数。这样，这两个函数都将从init函数调用，并且在触发window.onload时将调用init：

function init() {
runVideoScript()
runImageScript()
}
window.onload = init

---

在当前的设置中，只调用最后一个函数的原因是因为你用另一个函数替换了window.onload函数，并且基本上忽略了第一个函数。

Answer 2

只需创建一个 init 函数，例如 initVideo 函数，并在执行后运行 initImage。

function initVideo() {
var vidDefer = document.getElementsByTagName("iframe");
for (var s = 0; s < vidDefer.length; s++) {
if(vidDefer[s].getAttribute('data-src')) {
vidDefer[s].setAttribute('src',vidDefer[s].getAttribute('data-src'));
}
}
initImage();
}
function initImage() {
var imgDefer = document.getElementsByClassName("img-responsive");
for (var i = 0; i < imgDefer.length; i++) {
if (imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
}
}
}
window.onload = initVideo();