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

Question

I have written a Javascript function for resizing the Carousel according to the screen width. It's doing the job properly but the only issue is that it doesn't get initialized on the initial page load. The Carousel is only present on the homepage and when I visit it for the first time, the code doesn't get executed. However, if I reload the page it does get executed. It even gets executed when I resize my browser window. But I would like it to initialize on the first first load as well. Here's the code:

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);
} 

Answer 1

You're adding a listener, but the callback won't get called unless it is triggered.

You can instead declare the callback as a function, add the listener with the function as callback, and then call the function directly for the initial load.

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);
} 

Answer 2

You're adding an event listener on the page resize. First of all, this should all be wrapped in an on load event listener so you can be sure that the element #carousel is even available. Then, I would execute the resize function manually by maybe defining the function in the on load event function. Then set it for resizing events. I'm on my phone so it's hard to type an example, for for example:

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.
  });