jquery – bxslider在加载时计算错误的视口大小

前端之家收集整理的这篇文章主要介绍了jquery – bxslider在加载时计算错误的视口大小前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
无论如何,我最近开始使用bxslider,我有一个问题。 @H_403_2@似乎在页面加载时错误地计算其视口大小,这意味着它在移动设备,平板电脑等上不能正常工作。

@H_403_2@奇怪的是,当我调整浏览器的窗口大小(甚至只是一个像素)时,视口高度得到正确的计算,一切都看起来不错。但是如果我刷新具有相同高度和宽度的页面,则无法正确计算bx-viewport。

@H_403_2@任何想法为什么会发生这种情况?

@H_403_2@HTML看起来像这样(是的,我知道它可能没有任何关系,但仍然):

  1. <ul class="seminars-slider">
  2. <li>
  3. <article class="education-article">
  4. <h3><a href="#"> Sit tincidunt eros massa,lundium ultrices,sit in aliquet velit</a></h3>
  5. <p>LOL1</p>
  6. <div class="buttons">
  7. <a href="#" class="book-button"><span>Book now</span></a>
  8. <a href="#" class="read-more"><span>Read more</span></a>
  9. </div>
  10. <div class="clearall"></div>
  11.  
  12. </article>
  13. <div class="clearall"></div>
  14. </li>
  15.  
  16. // same li
  17. <li>
  18. <article class="education-article">
  19. <h3><a href="#"> Sit tincidunt eros massa,sit in aliquet velit</a></h3>
  20. <p>LOL1</p>
  21. <div class="buttons">
  22. <a href="#" class="book-button"><span>Book now</span></a>
  23. <a href="#" class="read-more"><span>Read more</span></a>
  24. </div>
  25. <div class="clearall"></div>
  26.  
  27. </article>
  28. <div class="clearall"></div>
  29. </li>
  30. </ul>
@H_403_2@js调用看起来像:

  1. slider=jQuery('.seminars-slider').bxSlider({
  2. mode: 'vertical',controls:false,pager:false,minSlides:2,maxSlides:2,moveSlides:1
  3. });
  4.  
  5. jQuery('.up-control').click(function() {
  6. slider.goToNextSlide();
  7. });
  8. jQuery('.down-control').click(function() {
  9. slider.goToPrevSlide();
  10. });
@H_403_2@谢谢。

解决方法

这可能是你早点调用bxSlider函数。如果你正在调用它 @H_403_2@$(document).ready(function(){…});

@H_403_2@考虑使用

@H_403_2@$(window).load(function(){…});

@H_403_2@使用这两个函数之间的区别是(document).ready等待,直到DOM被显示用户的初始状态,而(window).load实际上等待直到所有资源都被加载到DOM上。

猜你在找的jQuery相关文章