javascript - 在页面加载时，背景图像开始挤压然后展开

Question

我不明白为什么这个page从压缩的图像开始，扩展到正确的视口(viewport)大小。我在 css 上看不到任何会使其表现如此的东西。

我确实有这个脚本，它基本上可以确保背景图像的 Canvas 无论屏幕大小如何都保持其纵横比。但我不确定这是否会导致问题。

  $(window).load(function(){
      var resizeHero = function(){     
      var hero = $("#hero-fold")
      window1 = $(window);

      hero.css({
        "width": window1.width(),
        "height": "auto"
      });

    if(window1.width() < window1.height())
     {
         hero.css({
        "width": window1.width(),
        });

     }
   };

   resizeHero();

   $(window).resize(function(){
   resizeHero();    
     });
   });

提前致谢!

Answer 1

你可以尝试使用

$(document).ready()

而不是 load() 函数。由于 load() 函数仅在加载整个页面后运行，我想这会给您带来问题。

然而，$(document).ready() 函数在 HTML DOM 准备就绪时运行。