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

Get Image Dimensions of Hidden Carousel Item

本文关键字：图像 旋转木马 隐藏 获取 项目      更新时间：2023-09-26

在我的网站上，我需要在Bootstrap carousel中对某些图像应用css边距。我在页面上迭代图像，并在需要旋转特定图像时运行javascript函数applyimageroation。在尝试应用

边距之前，我试图确保图像已完全加载到页面上。
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

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

如何获得在引导旋转木马中不活动的图像的尺寸?

这可能是因为您正在获取DOM中元素的尺寸，并且在运行此函数时初始carousel样式可能会影响到它。

我会这样做:

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);
  }
});

好的部分是，它实际上不会请求你的图像两次，它只会从缓存中取出它。或者如果它还没有在缓存中，它会请求获取它，文档中的元素最终会从缓存中加载图像。

完全公开，当然，此方法确实会生成少量垃圾，但是通过为每个轮播图像创建一个分离的DOM树(img元素)来收集这些垃圾。

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

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

$(function()是document.on("ready")的快捷方式

给图片充分加载到文档中的时间。

我已经能够通过使用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);
     });
});
相关文章：