Question

我有这个问题：在我正在开发的Wordpress网站的主页上：http://baksagaspar.com/MH-work/我有一个带有这个jQuery + jQueryUI（比例）脚本的动画：

jQuery(function($) {  

// home image set dimensions related to screen size
var Swidth = screen.width;
var imgw = $('#main-back-imghome').width();
var imgh = $('#main-back-imghome').height();
var imgpercent = (imgw / Swidth);
var imgWN = imgw * imgpercent;
var imgHN = imgh * imgpercent;

// now show  
$('#main-back-imghome').css( {width: imgWN, height: imgHN} ).center().hide().delay(1000).show("scale", {}, 3500);

  });

我遇到的问题是，当我第一次访问页面时，动画没有触发，但是在刷新时，之后一切都很好。第一次访问者首先输入一个完整的空白页面时真的让人分心:-(

我的想法是以某种方式测试动画是否已触发，如果没有 - 启动它，但也许这不是正确的方式......

有任何建议如何解决这个问题？

Answer 1

我认为动画已被触发，但它不知道半兆字节图像启动时有多大。刷新时一切正常，因为到那时图像在浏览器的缓存中。

在您的HTML中，您有：

<img id="main-back-imghome" src=".." />

请注意，您没有width或height属性。在第一次加载时执行此操作：

var imgw = $('#main-back-imghome').width();
var imgh = $('#main-back-imghome').height();

图片数据不会被加载，因此宽度和高度将为零，因此imgWN和imgHN也将为零。

我将width和height属性放在#main-back-imghome和style="display:none;"上;然后，将最初的.css()调用更改为：

$('#main-back-imghome').css({
    width: imgWN,
    height: imgHN,
    display: 'inline-block'
})

即使未加载图片数据，width和height属性也会为您提供有用的imgWN和imgHN值。从display:none开始应该避免从完整尺寸缩小到缩小的起始尺寸;如果弄乱visibility:hidden不起作用，您也可以尝试在visibility: 'visible'来电中使用.css()和display开始。

带有jquery缩放动画的主页第一次没有加载

1 个答案: