Question

我正在使用Bxslider的图片库。我在幻灯片中有超过15张图片，这需要花费大量时间来加载。因此，我需要在出现特定幻灯片时逐个加载每个滑块中的图像。我从这里得到一个示例lazyload and bxslider，它使用LazyLoad加载图像。但它不适合我。任何人都能帮助我吗？

我正在使用此代码

    $(document).ready(function(){
    $("#moreLessons").bxSlider( { 
        startingSlide:1,
        pager: false
    });
    // trigger lazy to load new in-slided images
    $("a.bx-prev, a.bx-next").bind("click", function() {
        // extra call for lazy loading
        setTimeout(function() { $(window).trigger("scroll"); }, 100);
    });
});

Answer 1

您可以通过添加以下内容“欺骗”浏览器移动1像素：
$（窗口）.scrollTop（$（window）.scrollTop（）+ 1）;触发a.bx-prev和a.bx-next

然后你可以设置：
$（窗口）.scrollTop（$（窗口）.scrollTop（） - 1）;在事件被召唤后立即开火。

因此，如果幻灯片显示为50张图像，则最后不会向下滚动页面50px。

此方法也适用于Drupal 7中的bxslider，并添加了lazyload模块。只需启用lazyload，将加载图标设置为“none”，并将上述javascript调用添加到视图中bxslider设置的回调部分。瞧！继续把所有hi-rez图像放在你喜欢的地方。

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <p id="id" class="text">
  </p>
  <div id="errorId" class="error hide">
    <div class="errorHeader">
      <div class="arrow-up"></div>
      <h1>F%*K</h1>
      <div class="arrow-up"></div>
    </div>
  </div>
</div>

如何使用BXSlider进行延迟加载

2 个答案: