腾讯云

文章/答案/技术大牛

发布

社区首页 >问答首页 >echo js未加载所有图像

问echo js未加载所有图像
EN

Stack Overflow用户

提问于 2015-12-24 13:57:02

回答 2查看 354关注 0票数 0

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

现在的问题是，只有部分图像被加载到carousel中。假设10个中有7个正在加载，其余3个echo 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 -->

javascript

lazy-loading

回答 2

Stack Overflow用户

发布于 2015-12-24 14:31:44

根据文档here，默认的最大项目数是5，因此您需要将其设置为您想要的内容。像这样

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

有关如何做到这一点的其他示例可以在here中找到

票数 0

Stack Overflow用户

发布于 2015-12-24 14:38:14

我找到了答案。

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

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

票数 0

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

原文链接：

https://stackoverflow.com/questions/34447992

复制

相似问题

问echo js未加载所有图像
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问echo js未加载所有图像EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问echo js未加载所有图像
EN