फ्लेक्सस्लाइडर - छवि प्रीलोडर

Question

मुझे अपने उत्तरदायी flexslider प्लगइन के साथ एक समस्या है। प्लगइन ठीक काम करता है जब तक कि आपके पास वास्तविक स्लाइड शो में कई छवियां न हों। लोडिंग व्यवहार तब स्वीकार्य नहीं है।

मुझे उम्मीद थी कि कोई मुझे निम्नलिखित flexslider छवि प्रीलोडर स्क्रिप्ट के साथ मदद कर सकता है क्योंकि मैं इसे काम नहीं कर सकता।

Flexslider एचटीएमएल

<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 स्क्रिप्ट

<!-- 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;} 

कोई मदद:

यहाँ कोड मैं का उपयोग कर रहा है इसकी प्रंशसा की जाती है!

Answer 1

फ्लेक्सस्लाइडर से स्लाइडर ऑब्जेक्ट का उपयोग करने के बजाय, स्लाइडर तत्व को स्वयं एक 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> 

Answer 2

मैं इसे "प्रारंभ" के बजाय "पहले" कॉलबैक का उपयोग करके काम करने में कामयाब रहा।

तो जे एस सा होगा:

<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;} 

पर:

<!-- 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> 

Answer 3

मैं कई बार के लिए और मेरे लिए करने की कोशिश की तो वह ऐसा काम किया "! महत्वपूर्ण" भाग पर ध्यान दें, यह बिना काम नहीं किया क्योंकि यह flexslider की डिफ़ॉल्ट सफेद पृष्ठभूमि के साथ टकरा रहा था। , पहले ली को छोड़कर;: मैं की तरह

<div class="flexslider loading"> 

Answer 4

कोशिश ' "कोई नहीं प्रदर्शन" शैली =' प्रत्येक ली के लिए जोड़ने एचटीएमएल निर्धारित किया है। यह काम करना चाहिए।

Answer 5

मैं इसके साथ भी संघर्ष कर रहा था, और वास्तव में जवाब वास्तव में सरल है। केवल बात यह है कि अपने कोड में गलत है यह है:

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

और अपने सीएसएस में आप वर्ग .loading

तो आपको लगता है कि div के लिए clas में परिवर्तन करना होगा लोड करने के लिए परिभाषित करते हैं। इस तरह:

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