Flexslider - 圖像預加載器

我的應答flexslider插件有問題。該插件工作正常，除非您在實際幻燈片中有很多圖像。加載行爲是不可接受的。Flexslider - 圖像預加載器

我希望有人可以幫我用下面的flexslider圖像預加載器腳本，因爲我無法讓它工作。

這裏是我使用的代碼：

FLEXSLIDER HTML

<div class="slider"> 
    <div class="flexslider loading" style="overflow-x: hidden; overflow-y: hidden; "> 
     <ul class="slides" style="width: 5200%; -webkit-transition-duration: 0s; -webkit-transform: translate3d(-9702px, 0px, 0px); "> 

     <li style="float: left; display: block; width: 940px; "> 
     <img src="image1.jpg"> 
     </li> 
     <li style="float: left; display: block; width: 940px; "> 
     <img src="image2.jpg"> 
     </li>      
     <li style="float: left; display: block; width: 940px; "> 
     <img src="image3.jpg"> 

     </ul> 

    </div>

FLEXSLIDER腳本的HTML HEAD

<!-- FlexSlider --> 
<script type="text/javascript" charset="utf-8"> 
    $(window).load(function() { 
    $('.flexslider').flexslider({ 
    animation: "slide",   
    slideshow: false, 
    controlsContainer: ".slider" 

    start: function(slider) { 
    slider.removeClass('loading');} 

     }); 
});      

</script>

FLEXSLIDER.CSS

.loading {min-height: 300px; background: url('loader.gif') no-repeat center center;}

任何幫助感謝！

來源

2012-07-20 Alex

此變通辦法也感興趣的話： http://stackoverflow.com/a/12727900/1810012 – xaa 2014-01-24 11:17:33

不要使用flexslider中的滑塊對象，只要將滑塊元素本身設爲jQuery對象即可。

<!-- FlexSlider --> 
<script type="text/javascript" charset="utf-8"> 
    $(window).load(function() { 
     var target_flexslider = $('.flexslider'); 
     target_flexslider.flexslider({ 
      animation: "slide", 
      slideshow: false, 
      controlsContainer: ".slider", 

      start: function(slider) { 
       target_flexslider.removeClass('loading'); 
      } 

    }); 

});      
</script>

來源

2012-08-03 17:04:53

什麼的這點？它仍然只在dom完全加載時創建頁面。 – 2013-02-08 00:05:45

對，這種情況下解決方案並非如此。我們需要一個懶惰的加載腳本，而不僅僅是一個加載圖標（這很簡單）。 – 2013-07-30 09:22:22

我設法讓它使用回調「之前」而不是「開始」。

所以JS位將是：

<!-- FlexSlider --> 
<script type="text/javascript" charset="utf-8"> 
    $(window).load(function() { 
     $('.flexslider').flexslider({ 
     animation: "slide", 
     slideshow: false, 
     controlsContainer: ".slider" 

     before: function(slider) { 
      slider.removeClass('loading'); 
     } 
     }); 
    });      

</script>

來源

2013-03-08 09:56:44

我嘗試了很多時間，對我來說它的工作是這樣的：

<script type="text/javascript" charset="utf-8"> 
    $(window).load(function() { 
    $('.flexslider').flexslider({ 
     start: function(slider) { 
      slider.removeClass('loading'); 
    } 
}); 
}); 
</script>

而且在flexslider.css

.loading {min-height: 300px; background: url('loader.gif') no-repeat center center !important;}

請注意「！important」部分，它沒有工作，因爲它與flexslider的默認白色背景相碰撞。我設置的HTML像

<div class="flexslider loading">

來源

2013-03-22 06:39:59 danielgc

嘗試添加每個li'style =「display：none;」'，除了第一個li。它應該工作。

來源

2013-04-19 13:13:54

我也在爲此苦苦掙扎，其實答案其實很簡單。那是錯在你的代碼的唯一事情是這樣的：

<div class="flexslider loading" style="overflow-x: hidden; overflow-y: hidden; ">

而且在你的CSS定義爲加載類.loading

所以，你必須改變CLAS該股利。就像這樣：

<div class="loading" style="overflow-x: hidden; overflow-y: hidden; ">

來源

2015-10-29 15:36:52

Flexslider - 圖像預加載器

回答

相關問題