javascript - 刷新时宽度数组发生变化

Question

我想要一个包含所有 .slide 元素宽度的数组 slide_widths:

$( document ).ready(function() {
  var $slider = $('.slider ul');
  var slider_width = $slider.width();
  var $slides = $('.slide');
  var slide_widths = $.map($slides, function(slide) {
    return slide.getBoundingClientRect().width;
  });

  console.log(slide_widths);
});

刷新页面时得到不同的结果:

1. [201.328125, 180, 214.28125, 180, 180, 180, 168.46875, 180, 145.078125, 144, 142.1875, 250.6875, 0, 0, 0, 0, 0, 0, 0, 0]

2. [201.328125, 180, 214.28125, 180, 180, 180, 168.46875, 180, 145.078125, 144, 142.1875, 250.6875, 155.515625, 180, 180, 176.03125, 0, 0, 0, 0]

我想当 console.log 输出一个数组时，这个 map 函数仍然有效？我怎样才能避免它？

Answer 1

您的函数似乎在元素实际加载之前就获取了元素宽度，因此尚未加载的元素返回的宽度为 0。

尝试使用 $(window).on("load", function() { 而不是 $(document).ready(function() {

$(window).on("load" 将等待页面上的所有元素加载，而 $(document).ready 则不会。