Javascript 获取隐藏旋转木马项目的图像尺寸

在我的网站上，我需要将css边距应用于引导转盘中的某些图像。我迭代页面上的图像，并在需要旋转特定图像时运行javascript函数applyImageRotation。在尝试应用页边距之前，我尝试确保图像已完全加载到页面上：

function applyImageRotation(carousel_img, thumbnail_img, rotation, pageSource){
  if(pageSource=="index"){
     carousel_img.on('load', function(){
        console.log('carousel_img dimensions: ' + carousel_img.width() + ' ' + carousel_img.height());
        setCarouselImageMargins($(this), carousel_width);
     });
});

然而，当我实际尝试运行代码时，它似乎没有获得正确的图像宽度，我认为这可能是因为该图像不是引导转盘中的活动图像

carousel_img dimensions: 0 381 

当我在页面加载后运行相同的命令时，我得到图像宽度为非零

---

如何获取引导转盘中未激活的图像的尺寸？

使用jQuery，可以在文档准备好后运行函数

$(function(){
    //put your function here
}

---

$（function（）是文档的快捷方式。在（“就绪”）

上，为图像留出完全加载到文档中的时间

我已经能够通过使用

setTimeout

克服这个问题

我不熟悉Csarosuel；但是，试试这个

function applyImageRotation(carousel_img, thumbnail_img, rotation, pageSource){
  if(pageSource=="index"){
     carousel_img.on('load', function(){

setTimeout(function(){

        console.log('carousel_img dimensions: ' + carousel_img.width() + ' ' + carousel_img.height());
        setCarouselImageMargins($(this), carousel_width);

},500);
     });
});

---

这可能是因为您正在获取DOM中元素的维度，并且运行此函数时的初始旋转木马样式可能会影响这一点

我会这样做：

function applyImageRotation(carousel_img, thumbnail_img, rotation, pageSource){
  if(pageSource=="index"){
     $('<img/>')
          .on('load',function() {
            console.log('carousel_img dimensions: ' + this.width + ' ' + this.height);
            setCarouselImageMargins(carousel_img, carousel_width);
          })
          .attr('src',carousel_img[0].src);
  }
});

函数applyImageRotation（旋转图像、缩略图、旋转、页面源）{
如果（pageSource==“索引”）{
$('
它的好处在于，它实际上不会两次请求您的图像，它只会将其从缓存中拉出来。或者，如果它还不在缓存中，它会请求获取它，文档中的元素最终会从缓存中加载图像

当然，完全公开的是，此方法确实会生成少量垃圾，但通过创建分离的DOM树（img元素）将其收集对于每个旋转木马映像。
任意超时时间很难解决问题，而且不会在100%的时间内工作。这很奇怪，因为它在每个浏览器中都能100%工作。这是绝对事实！尝试在高延迟连接上执行此操作，但不会。更不用说此“解决方案”你强迫用户等待500毫秒，如果你想让它正常运行，可能需要的时间要少得多。那么拨号连接上的1000万像素图像呢？：）Adam，你在抓救命稻草。你不应该有-1我。老实说，到底是谁在考虑拨号连接？虽然Adam的解决方案可能是可行的，但如果你需要根据需要更改维度，bootstrap会发出一个你可以挂接的事件。关于它传递的名称和事件对象，请参阅第117行。非常感谢你r帮助！这对我来说很有效，尽管我不完全理解它是如何工作的。你能解释一下什么是$（'
$（'carousel\u img
），然后将加载事件侦听器附加到它上。由
$（''）创建的img元素吗
不在DOM的任何位置，因此不受任何CSS样式的影响。明白了！再次感谢您的帮助解决方案和解释。