javascript - 如何组合两个init函数？

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 函数中调用，并且 init 将在触发 window.onload 时被调用:

function init() {
  runVideoScript()
  runImageScript()
}

window.onload = init

<小时/>

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