初始页面加载时未执行Javascript代码

我已经编写了一个Javascript函数，用于根据屏幕宽度调整旋转木马的大小。它正确地完成了任务，但唯一的问题是它在初始页面加载时没有初始化。旋转木马只出现在主页上，当我第一次访问它时，代码不会被执行。但是，如果我重新加载页面，它会被执行。它甚至在我调整浏览器窗口大小时执行。但是我也希望它在第一次加载时初始化。代码如下：

let carousel = document.querySelector('#carousel');
if (carousel) {
  const size = 0.8;
  window.addEventListener('resize', () => {
    let width = carousel.clientWidth || carousel.offsetWidth;
    let carouselHeight = (width * size) + 'px';
    carousel.querySelector(".slide").style.height = carouselHeight;
  }, false);
} 

---

您正在添加侦听器，但除非触发回调，否则不会调用回调

相反，您可以将回调声明为函数，添加带有回调函数的侦听器，然后直接调用函数进行初始加载

function resizeCarousel(size) {
    let width = carousel.clientWidth || carousel.offsetWidth;
    let carouselHeight = (width * size) + 'px';
    carousel.querySelector(".slide").style.height = carouselHeight;
}

let carousel = document.querySelector('#carousel');
if (carousel) {
  const size = 0.8;
  window.addEventListener('resize', () => resizeCarousel(size), false);
   
  resizeCarousel(size);
} 

---

您正在“调整大小”页面上添加事件侦听器。首先，这一切都应该包装在一个加载事件侦听器中，这样您就可以确保元素#carousel甚至是可用的。然后，我将通过在onload事件函数中定义函数来手动执行resize函数。然后将其设置为调整事件大小。我正在使用手机，因此很难键入示例，例如：

document.addEventListener("DOMContentLoaded", function(event) { 
    function resize() { /* Resize Function. */ }
    var carousel = document.querySelector('#carousel');
    window.addEventListener(“resize”, resize);
    resize(); // Call it now as well as onresize.
  });