फ्लेक्सस्लाइडर धीमी छवि लोड

Question

मैं एक वेबसाइट पर फ्लेक्सस्लाइडर का उपयोग कर रहा हूं।

मुझे प्रतिक्रिया बहुत पसंद है और यही वजह है कि मैं निवो-स्लाइडर या कुछ इसी तरह के बदलाव में नहीं आना चाहता हूं।

इसके बारे में नकारात्मक यह है कि यह सभी छवियों को लोड होने से पहले पहली छवि प्रदर्शित नहीं करता है। इसलिए आपको स्लाइडर में सभी छवियों का इंतजार करना है ताकि साइट को ठीक से दिखने के लिए लोड किया जा सके। यह डेस्कटॉप/लैपटॉप पर स्वीकार्य है लेकिन मोबाइल डिवाइस पर नहीं।

मुझे यहां एक समान प्रश्न मिला Flexslider - image preloader लेकिन मैं इसे काम नहीं कर सका।

मैं इस का उपयोग अपने एचटीएमएल

   <ul class="slides">    
       <li> 
        <img src="pictures/slide1.jpg" alt=" "> 
       <li> 
        <img src="pictures/slide2.jpg" alt=" ">       
       </li> 
       <li> 
        <img src="pictures/slide3.jpg" alt=" "> 
       </li> 
       <li> 
        <img src="pictures/slide4.jpg" alt=" "> 
       </li> 
      </ul> 

सवाल यह है कि में कोड

$(window).load(function() { 
     $('.flexslider').flexslider(); 
    }); 

और यह गति प्रदान करने के। मैं जितनी जल्दी हो सके स्लाइडर को पहली छवि दिखा सकता हूं? और फिर दूसरा और इतने पर।

संपादित करें: मैंने समस्या हल की है। यह नीचे सही उत्तर में प्रस्तुत किया गया है। यदि आपके पास बेहतर समाधान है: कृपया साझा करें: डी

Answer 1

ठीक है। इसलिए मुझे ऐसा करने का एक तरीका मिला।

flexslider सीएसएस फ़ाइल में

इस लाइन के बाद लाइन पर इस लाइन

.flexslider .slides > li:first-child {display: block; -webkit-backface-visibility: visible;} 

जोड़ें:

.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} 

कि पहली छवि दिखाई देते हैं और इसे लोड करने के लिए अन्य छवियों के लिए इंतजार करेंगे कर देगा इससे पहले कि यह स्पिन।

Answer 2

कुछ तरीके हैं जिन्हें आप जा सकते हैं।

<img src="pictures/slide1.jpg" style="display:none"> 
<img src="pictures/slide2.jpg" style="display:none"> 
<img src="pictures/slide3.jpg" style="display:none"> 
<img src="pictures/slide4.jpg" style="display:none"> 
<ul>...your slides...</ul> 

आपकी छवियों को पहले से लोड करने के लिए:

सबसे पहले आप इस तरह के रूप में छिपा छवि टैग जोड़ने की कोशिश कर सकते हैं। हालांकि मैं इस विधि के खिलाफ सिफारिश करेंगे।

एक और समाधान जो आपकी सामग्री को जल्दी दिखाएगा (लेकिन आईई 6 के साथ परीक्षण नहीं किया गया है) https://github.com/ozzyogkush/jquery.contentSlider पर मिले स्लाइडर का उपयोग करना है। यह एक स्लाइडर विजेट है जो मैं विकसित कर रहा हूं जो बहुत अच्छा काम करता है। इसके लिए आपके डीओएम लेआउट में थोड़ी सी बदलाव की आवश्यकता होगी, लेकिन आपको जटिल स्लाइड्स की आवश्यकता हो सकती है।

Answer 3

मैं जल्दी से शैली flexslider शैलीपत्रक में CSS शैली जोड़कर इस समस्या को हल कर दिया है:

.flexslider .slides > li a img{visibility:visible !important; opacity:1 !important;filter:alpha(opacity=100) !important;} 

Answer 4

मैं जानता हूँ कि यह एक पुरानी समस्या नहीं है, लेकिन मैं एक सरल समाधान है।

खोजें

.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} 

और

.flexslider .slides > li:not(:first-child) 

Answer 5

smoothHeight: false //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode 

को चयनकर्ता बदल अगर आप smoothHeight सेट के रूप में डिफ़ॉल्ट मोड में सच की कोशिश तो यह प्रदर्शन भी

Answer 6

मैंने पाया सुधार कर सकते हैं ऐसा करने का सबसे आसान तरीका।

इस तरह flexslider कंटेनर से पहले स्लाइडर की पहली छवि के साथ एक div जोड़ें।

<div class="pre-flexslider-container"> 
    <img src="slider.jpg"> 
</div> 
<div class="main-flexslider-container" style="display: none"> 
    <div class="flexslider"> 
    . 
    . 
    . 
    </div> 
</div> 

फिर initalization Flexslider के लिए निम्न कोड जोड़ें: