gpt4 book ai didi

javascript - 函数不在 jquery 文档就绪时执行

转载 作者:行者123 更新时间:2023-11-28 12:41:10 26 4
gpt4 key购买 nike

我有一个 JavaScript 函数,可以根据周围容器的大小(又取决于窗口大小)调整图像的大小和居中。我使用jquery作为js框架。该函数需要在文档加载后(文档准备好时)执行,而且当用户更改浏览器大小时也需要执行,即我在 html 文档中运行以下内容:

$(document).ready(function(){
fixImageSizes();
});

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

但由于某种未知的原因,该函数仅在用户调整浏览器大小时执行,而不是在加载后执行。有人可以帮忙解决这个问题吗?

(我的函数在下面是为了知识...)

function fixImageSizes()
{
var cw = $('#imagecontainer').width();
var ch = $('#imagecontainer').height();
$('#imagecontainer img').each(function()
{
var iw = $(this).css('width');
var ih = $(this).css('height');
if (parseInt(iw) < parseInt(cw)) // image width < viewport
{
var newih = Math.ceil(parseInt(ih) * parseInt(cw) / parseInt(iw)) + 'px';
var newimargint = '-' + Math.ceil(parseInt(newih)/2) + 'px';
var newimarginl = '-' + Math.ceil(parseInt(cw)/2) + 'px';
$(this).css({'width':cw,'height':newih,'margin-left':newimarginl,'margin-top':newimargint});
}
if (parseInt(ih) < parseInt(ch)) // image height < viewport
{
var newiw = Math.ceil(parseInt(iw) * parseInt(ch) / parseInt(ih)) + 'px';
var newimargint = '-' + Math.ceil(parseInt(ch)/2) + 'px';
var newimarginl = '-' + Math.ceil(parseInt(newiw)/2) + 'px';
$(this).css({'width':newiw,'height':ch,'margin-left':newimarginl,'margin-top':newimargint});
}
if (parseInt(ih) > parseInt(ch) && parseInt(iw) > parseInt(cw)) // viewport smaller than image, shrink image
{
if (parseInt(ch) - parseInt(ih) > parseInt(cw) - parseInt(iw)) // difference is less on height
{
var newiw = Math.ceil(parseInt(iw) * parseInt(ch) / parseInt(ih)) + 'px';
var newimargint = '-' + Math.ceil(parseInt(ch)/2) + 'px';
var newimarginl = '-' + Math.ceil(parseInt(newiw)/2) + 'px';
$(this).css({'width':newiw,'height':ch,'margin-left':newimarginl,'margin-top':newimargint});
}
else // difference less on width
{
var newih = Math.ceil(parseInt(ih) * parseInt(cw) / parseInt(iw)) + 'px';
var newimargint = '-' + Math.ceil(parseInt(newih)/2) + 'px';
var newimarginl = '-' + Math.ceil(parseInt(cw)/2) + 'px';
$(this).css({'width':cw,'height':newih,'margin-left':newimarginl,'margin-top':newimargint});
}
}

});

最佳答案

您应该使用 load 事件而不是 ready 事件。

ready 事件在文档加载之后、图像加载之前运行,因此您不会获得所有元素的正确大小。

关于javascript - 函数不在 jquery 文档就绪时执行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12140435/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com