时间戳

首页 > 解决方案 > JQuery 图像宽度一半的时间返回 0

javascript - JQuery 图像宽度一半的时间返回 0

问题描述

我知道这个问题与发布的其他问题相似，但我已经阅读了一堆，但我仍然无法弄清楚这个问题。我正在尝试根据图像的宽度添加一个类。基本上，如果图像是 100vw，我想添加一个名为 newTransform 的类。

这段代码有时会起作用。但是，其他时候宽度返回为 0。我发现这是因为我需要等到图像加载完毕才能调用宽度。我想我已经在这里做到了，但它不起作用。

$(function () {
    var galleryReel = $(".gallery-reel-item");

    galleryReel.each(function () {
      let img = $(this).load( "img");
      let width = img.width();
      let viewWidth = $(window).width();
      
        if (width == viewWidth) {
            $(this).addClass("newTransform");
        } 
      else {}
    });
});

更新：我的更新代码如下。现在唯一的问题是它在应用新样式之前会闪现旧样式。

$(function () {
  let timeToWait = 1000; // 1 second

  setTimeout(() => {
    var galleryReel = $(".gallery-reel-item");

    galleryReel.each(function () {
      let width = galleryReel.width();
      let viewWidth = $(window).width();
  
      if (width == viewWidth) {
        $(this).addClass("newTransform");
      } 
    });
  }, timeToWait);
});

解决方案：我最终采用的解决方案是以下代码，同时还添加了一些 CSS 来最初隐藏图库。

$(function () {
  let timeToWait = 1000; // 1 second

  setTimeout(() => {
    var galleryReel = $(".gallery-reel-item");

    galleryReel.each(function () {
      let width = galleryReel.width();
      let viewWidth = $(window).width();
  
      if (width == viewWidth) {
        $(this).addClass("newTransform");
      } 
    });
    
    //show the gallery
    $(".gallery-reel").css("visibility", "visible");
    
  }, timeToWait);
});

标签： javascriptjquery

解决方案

在您的 html 代码中的某处。这最初将被隐藏...

<div class="gallery-items-container" style="visibility:hidden">
  //all your images are here
</div>

您可以使用 setTimeout 包装您的内部代码...

$(function () {

  let timeToWait = 1000; // 1 second

  setTimeout(() => {
    var galleryReel = $(".gallery-reel-item");

    galleryReel.each(function () {
      let img = $(this).load( "img");
      let width = img.width();
      let viewWidth = $(window).width();
  
      if (width == viewWidth) {
        $(this).addClass("newTransform");
      } 
    });

    //show the gallery
    $('.gallery-items-container').css('visibility', 'visible');

  }, timeToWait)
});

推荐阅读