首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >对于所有宽度属性,任何类型的循环中的HTMLElement都返回0或错误的值

对于所有宽度属性,任何类型的循环中的HTMLElement都返回0或错误的值
EN

Stack Overflow用户
提问于 2018-07-17 01:58:05
回答 1查看 56关注 0票数 0

我正在做这件事:

$.Slider = function (elt) {
  //getting main elements
  var _this = this;
  this.elt = (elt instanceof $) ? elt : $(elt);
  this.wrapper = this.elt.find('.artworks_wrapper');

  //creating wrapper template for the triggers
  var sliderNav = document.createElement('div');
  $(sliderNav).css({
    width: '100%',
    height: '100%',
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'nowrap',
    justifyContent: 'space-between',
    position: 'absolute',
    top: '0',
    left: '0',
    zIndex: '1',
  });

  /*position relative for the global slider wrapper
  * easier element placement
  */
  this.elt.css('position', 'relative');

  this.elt.append(sliderNav);

  //creating triggers' template
  var triggerSample = document.createElement('div');
  $(triggerSample).css({
    width: '20%',
    height: '100%',
    backgroundImage: 'url("https://cdn.pixabay.com/photo/2014/03/25/16/59/left-297787_960_720.png")',
    backgroundSize: '50% 50%',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
    position: 'absolute',
    top: '0',
    cursor: 'pointer',
  });

  //specializing left and right triggers
  $leftTrigger = $(triggerSample);
  $rightTrigger = $leftTrigger.clone(true);

  $leftTrigger.css('left', '0');

  $rightTrigger.css('transform', 'scaleX(-1)');
  $rightTrigger.css('right', '0');

  //appending to sliderNav
  $(sliderNav).append($leftTrigger);
  $(sliderNav).append($rightTrigger);

  //getting needed datas about the slides
  this.slides = this.elt.find('.art_container');
  this.slidesNb = this.slides.length;
  this.maxDecal = this.slidesNb - 1;

  this.width = parseInt(this.elt.width());
  this. hmiddle = this.width / 2;

  //decal management variable
  this.decal = 0;
  this.decals = [this.hmiddle];

  //IT WORKS HERE WTF???????
  for (var i = 0; i < this.slidesNb; i++) {
    var actual = this.slides.get(i);
    var actualWidth =
      actual.offsetWidth +
      parseInt($(actual).css('margin-left')) +
      parseInt($(actual).css('margin-right'));
    console.log(actual);console.log(actualWidth);
    var actualHalfWidth = actualWidth / 2;
    _this.decals[i] -= actualHalfWidth;
    _this.decals[i + 1] = _this.decals[i] - actualHalfWidth;
  }

  this.nav = {
    left: $leftTrigger,
    right: $rightTrigger,
  };
};

$.Slider.prototype = {
  adjustView: function ()
  {
    if (this.decal === 0) {
      $(this.nav.left).css('visibility', 'hidden');
    } else if (this.decal === this.maxDecal) {
      $(this.nav.right).css('visibility', 'hidden');
    } else {
      $(this.nav.left).css('visibility', 'visible');
      $(this.nav.right).css('visibility', 'visible');
    }
  },

  adjustPos: function ()
  {
    var newPose = this.decals[this.decal];
    $(this.wrapper).offset({ left: newPose });
  },

  adjust: function ()
  {
    this.adjustView();
    this.adjustPos();
  },

  InitEvents: function ()
  {
    var _this = this;
    $(this.nav.left).click(function ()
      {
        if (_this.decal > 0) {
          _this.decal--;
          _this.adjust();
        }//else doesn't move
      }
    );

    $(this.nav.right).click(function ()
      {
        if (_this.decal < _this.maxDecal) {
          _this.decal++;
          _this.adjust();
        }//else doesn't move
      }
    );
  },
};

$(document).ready(function () {
  $('.artworks_slider').each(function () {
    var slider = new $.Slider($(this));
    slider.adjust();
    slider.InitEvents();
  });
});

$(document).resize(function () {
  $('.artworks_slider').each(function () {
    var slider = new $.Slider($(this));
    slider.adjust();
    slider.InitEvents();
  });
});
html { width: 100%; max-width: 100%; }
body { width: 100%; height: 100vh; }
main
{
  width: 100%;
  height: 100%;
}

/*------FLEX------*/
.flex_container { display: flex; }

.flex_container.horizontal
{
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
}
.flex_container.vertical
{
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
}

.flex_container.aligned_content
{
  -ms-align-items: center;
  align-items: center;
}
.flex_container.centered_content
{
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
}
.flex_container.spaced_content
{
  justify-content: space-between;
  -ms-align-items: center;
  align-items: center;
}
.flex_container.stretched_content
{
  justify-content: space-around;
  -ms-align-items: center;
  align-items: center;
}

/*------ART DISPLAY------*/
.artworks_wrapper
{
  width: 100%;
  height: 100%;

  position: absolute;
}
.artworks_wrapper > .art_container:nth-child(1) { margin-left: 20px; }
.artworks_wrapper > .art_container:last-child { margin-right: 20px; }

.art_container
{
  margin: 0 10px;
  position: relative;
}
.art_container > .art_image.portrait { max-height: 60vh; }
.art_container > .art_image.paysage { max-width: 70vh; }

.art_container > .art_informations
{
  padding: 5px;

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0
}

.artworks_slider
{
  width: 100%;
  height: 80%;

  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<main class="flex_container horizontal centered_content">
  <div class="artworks_slider">
    <div class="artworks_wrapper flex_container horizontal aligned_content">
      <figure class="art_container">
        <img
          class="art_image portrait"
          src="https://cdn.pixabay.com/photo/2018/07/08/14/16/cat-3523992_960_720.jpg"
          alt="Portrait d'Albator">
        <figcaption class="art_informations">
          <section class="art_description">
            <h2>stuff</h2>
            <p>
              
            </p>
          </section>
          <section class="art_data">
            
          </section>
        </figcaption>
      </figure>
      <figure class="art_container">
        <img
          class="art_image paysage"
          src="https://cdn.pixabay.com/photo/2018/06/23/16/22/romanesco-3493007_960_720.jpg"
          alt="">
        <figcaption class="art_informations">
          <section class="art_description">
            <h2>stuff</h2>
            <p>
              
            </p>
          </section>
          <section class="art_data">
            
          </section>
        </figcaption>
      </figure>
      <figure class="art_container">
        <img
          class="art_image portrait"
          src="https://cdn.pixabay.com/photo/2018/07/08/14/16/cat-3523992_960_720.jpg"
          alt="">
        <figcaption class="art_informations">
          <section class="art_description">
            <h2>stuff</h2>
            <p>
              
            </p>
          </section>
          <section class="art_data">
            
          </section>
        </figcaption>
      </figure>
      <figure class="art_container">
        <img
          class="art_image paysage"
          src="https://cdn.pixabay.com/photo/2018/06/23/16/22/romanesco-3493007_960_720.jpg"
          alt="">
        <figcaption class="art_informations">
          <section class="art_description">
            <h2>stuff</h2>
            <p>
              
            </p>
          </section>
          <section class="art_data">
            
          </section>
        </figcaption>
      </figure>
    </div>
  </div>
</main>
</body>

我不明白..。呼叫在这里工作,但在家中不工作。检查图像时的console.log() is within loop and first displays the HTMLElement then it's offsetWidth. Only things changed here are the images. offsetWidth值为they are right,但使用HTMLElement.offsetWidth调用时仍为they are wrong ...

帮助?有没有人?

编辑:删除了body中的'emotions‘。我认为这一切都归结于执行顺序:在内存中加载图像后,脚本可以很好地执行。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-17 05:15:15

问题是,当你想要获取图像的宽度时,图像还没有加载。

我已经玩了很久了.

但这里有一个,我主要对此进行了更改:

for (var i = 0; i < this.slidesNb; i++) {
  var actual = this.slides.get(i);
  var actualWidth =
    actual.offsetWidth +
    parseInt($(actual).css('margin-left')) +
    parseInt($(actual).css('margin-right'));
  console.log(actual);console.log(actualWidth);
  var actualHalfWidth = actualWidth / 2;
  _this.decals[i] -= actualHalfWidth;
  _this.decals[i + 1] = _this.decals[i] - actualHalfWidth;
}

变成这样:

// How many images
var imgCollection = this.wrapper.find("img");
var imgCount = imgCollection.length;
console.log(imgCount + " images.");

var imgLoaded = 0;

imgCollection.each(function(){

  $(this).on("load",function(){
    imgLoaded++;

    // When all images are loaded
    if(imgLoaded==imgCount){
      console.log("All images loaded");

      for (var i = 0; i < _this.slidesNb; i++) {
        var actual = _this.slides.get(i);
        var actualWidth = $(actual).outerWidth(true);
        console.log(actualWidth);
        var actualHalfWidth = actualWidth / 2;
        _this.decals[i] -= actualHalfWidth;
        _this.decals[i + 1] = _this.decals[i] - actualHalfWidth;
      }
      console.log("-----");
      console.log(_this.decals);
    }
  });
});

所以如果你已经明白了.加载所有图像后,进入you测量循环。

为了好玩,我把.offset()换成了.animate()

;)

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51367628

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档