Question

在我的网站上，我需要将CSS页边距应用于Bootstrap轮播中的某些图像。我迭代页面上的图像并在需要旋转特定图像时运行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

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

如何获取在引导程序轮播中无效的图像尺寸？

Answer 1

这可能是因为您正在获取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);
  }
});

关于它的好处是它实际上不会两次请求您的图像，它只会从缓存中提取它。或者，如果它还没有进入缓存，它将发出请求以获取它，文档中的元素将最终从缓存中加载图像。

完全公开，当然，通过为每个轮播图像创建分离的DOM树（img元素），此方法确实会生成少量将被收集的垃圾。

Answer 2

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

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

$（function（）是document.on的快捷方式（＆＃34; ready＆＃34;）

Answer 3

将图像时间完全加载到文档中。

我已经能够使用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);
     });
});

获取隐藏轮播项目的图像尺寸

3 个答案: