javascript - 如何结合两个init函数?
问题描述
我一直在努力加快我的页面加载速度。我有这两个延迟脚本来最小化加载时间并提高性能。
问题是只有最后一个功能可以工作。前任。如果 '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;
解决方案
所以基本上听起来你希望能够在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
为另一个函数,并且基本上忽略了第一个函数。
推荐阅读
- autosys - Python Autosys 自动化
- node.js - Bull Queue如何进行无限尝试?
- reactjs - Serviceworker - WorkBox v3.5 在 CRA 中“找不到注入清单的地方”
- r - 不再工作的闪亮应用程序
- math - 试图理解涉及 O(M+N) 的渐近案例
- laravel - 如何激活从控制器传递数据到视图的模式。(拉拉维尔)
- javascript - 在 React 中表单验证后如何路由用户?
- python - 是否有任何其他 win32api 可以单击/按下最小化窗口?
- flutter - 使用 get_it 的 Flutter 依赖注入设置问题
- typescript - 如何在控制器中使用服务?- 快递打字稿