Question

我正在尝试使用owl carousel和echo.js进行图像轮播和延迟加载。

现在问题是只有一些图像被加载到轮播中。比如说，10个中的7个正在加载剩余的3个回声js没有加载图像。

为什么会这样？

这是我的代码

<div id="brand-slider" class="owl-carousel brand-slider custom-carousel owl-theme">
            <div class="item">
                <a href="#" class="image">
                    <img data-echo="assets/images/brands/univers.jpg" src="assets/images/blank.gif" alt="">
                </a>    
            </div><!--/.item-->

            <div class="item">
                <a href="#" class="image">
                    <img data-echo="assets/images/brands/kelloggs.jpg" src="assets/images/blank.gif" alt="">
                </a>    
            </div><!--/.item-->

            <div class="item">
                <a href="#" class="image">
                    <img data-echo="assets/images/brands/pampers.jpg" src="assets/images/blank.gif" alt="">
                </a>    
            </div><!--/.item-->

            <div class="item">
                <a href="#" class="image">
                    <img data-echo="assets/images/brands/pepsico.jpg" src="assets/images/blank.gif" alt="">
                </a>    
            </div><!--/.item-->

            <div class="item">
                <a href="#" class="image">
                    <img data-echo="assets/images/brands/p-g.jpg" src="assets/images/blank.gif" alt="">
                </a>    
            </div><!--/.item-->

            <div class="item">
                <a href="#" class="image">
                    <img data-echo="assets/images/brands/vini.jpg" src="assets/images/blank.gif" alt="">
                </a>    
            </div><!--/.item-->

            <div class="item">
                <a href="#" class="image">
                    <img data-echo="assets/images/brands/itc.jpg" src="assets/images/blank.gif" alt="">
                </a>    
            </div><!--/.item-->

            <div class="item">
                <a href="#" class="image">
                    <img data-echo="assets/images/brands/nestle.jpg" src="assets/images/blank.gif" alt="">
                </a>    
            </div><!--/.item-->

            <div class="item">
                <a href="#" class="image">
                    <img data-echo="assets/images/brands/cadbury.jpg" src="assets/images/blank.gif" alt="">
                </a>    
            </div><!--/.item-->

            <div class="item">
                <a href="#" class="image">
                    <img data-echo="assets/images/brands/coco.jpg" src="assets/images/blank.gif" alt="">
                </a>    
            </div><!--/.item-->

            <div class="item">
                <a href="#" class="image">
                    <img data-echo="assets/images/brands/kraft.jpg" src="assets/images/blank.jpg" alt="">
                </a>    
            </div><!--/.item-->

 </div><!-- /.owl-carousel #logo-slider -->

Answer 1

根据文档here，默认的最大项目数为5.因此您需要将其设置为您想要的。喜欢这个

$(document).ready(function() {     
  $("#brand-slider").owlCarousel({
      items : 10     
  });     
});

有关如何执行此操作的其他示例，请参阅here

Answer 2

我找到了答案。

 echo.init({
        offset: 1000,
        throttle: 250,
        unload: false
    });

我们可以使用echo js的offset参数来定位视口外的图像。

echo js未加载所有图像

2 个答案: