लेज़ी लोड हो रहा है

Question

मैं लेज़ी jQuery लोड हो रहा है प्लगइन का उपयोग करने और इस साइट पर निर्देशों का पालन करके आलसी Flexslider के लिए काम लोड हो रहा है पाने के लिए कोशिश कर रहा हूँ: http://www.appelsiini.net/projects/lazyload

मैं प्लगइन स्क्रिप्ट लोड कर रहा हूँ और पर किसी भी त्रुटि नहीं दिख रहा है कंसोल। मैंने लेजरलोड फ़ंक्शन में कंटेनर या विकल्पों को पारित किए बिना कोशिश की और अभी भी कुछ भी नहीं। मैं इस पर घंटे बिताता हूं।

$("img.lazy").lazyload({ 
    effect: "fadeIn", 
    container: $(".slides > li") 
}); 

क्या किसी को पता है कि फ्लेक्सस्लाइडर में आलसी लोडिंग कैसे प्राप्त करें?

Answer 1

इसलिए मैंने छवि टैग पर डेटा-एटआर विशेषता पर वास्तविक छवि पृष्ठ जोड़ा और after ईवेंट आग पर मुझे active कक्षा के साथ छवि मिल जाएगी और डेटा-एटआर मान के बराबर img src विशेषता सेट करें।

Answer 2

मैं Flexslider 2 और Lazy Load Plugin for jQuery का उपयोग कर एक ही चीज़ करने की कोशिश कर रहा हूं।

ऐसा लगता है container संपत्ति तभी काम करता है तत्व के साथ overflow:scroll;

मैं इस कोड का उपयोग काम करने के लिए आलसी लोड प्राप्त करने में सक्षम था स्टाइल है:

$("#flexcontainer img.lazy").lazyload({ 
    failure_limit : 10, 
    effect: "fadeIn", 
    skip_invisible : false 
}); 

बहरहाल, यह सिर्फ आलसी लोड सब कुछ flexslider एनिमेटेड के बजाय एक बार में।

मैं भी इस कोड का उपयोग करने पर यह माउस पर काम करने के लिए प्राप्त करने में सक्षम था:

$("#flexcontainer img.lazy").lazyload({ 
    failure_limit : 10, 
    effect: "fadeIn", 
    event : "mouseover" 
}); 

हालांकि इस टच डिवाइस पर काम नहीं करता।

मुझे लगता है कि कुंजी अपनी खुद की कस्टम घटना बनाना है और इसे after कॉलबैक जैसे फ्लेक्सस्लाइडर कॉलबैक के बाद ट्रिगर करना है।

Answer 3

विधि मेरे लिए बहुत अच्छी तरह से काम करती है, लेकिन लोडिंग छवि को शेष छवियों के समान आकार की आवश्यकता होती है। मैं वास्तव में मोड के साथ http://imageresizing.net/ = पैड

का उपयोग मुख्य कंटेनर है कि आप flexslider के लिए उपयोग कर रहे हैं में, विशेषता

<li> 
    <img class="lazy" src="loading-image.jpg" data-src="actual-image.jpg" /> 
</li>    

आप प्रारंभ समारोह में एक "data-src" में वास्तविक छवि शब्दों में कहें, का उपयोग करें " प्रारंभिक छवि के साथ लोडिंग छवि को प्रतिस्थापित करने के लिए कॉलबैक शुरू करें, और विशेषता

$('#slider').flexslider({ 
    start: function (slider) { 
     // lazy load 
     $(slider).find("img.lazy").each(function() { 
      var src = $(this).attr("data-src"); 
      $(this).attr("src", src).removeAttr("data-src"); 
     }); 
    } 
}); 

मुझे आशा है कि यह किसी की सहायता करेगा।

Answer 4

साथ ही आप एक कस्टम ट्रिगर घटना के साथ lazyload प्रारंभ हो सकता है ...

$jQ("img[data-original]").lazyload({ 
      effect: "fadeIn", 
      skip_invisible: false, 
      event: "forceLazyLoad" 
     }); 

...और फिर flexslider के अंदर अपने सभी छवियों की तरह एक फोन के साथ पहले से लोड करने के लिए इस घटना को फोन: कोई वैकल्पिक समाधान की पेशकश की खातिर

$jQ('.flex-viewport').find('img[data-original]').trigger('forceLazyLoad'); 

Answer 5

- एक और विकल्प पहले से ही में बनाया गया आलसी लोड गया है जो एक संवेदनशील स्लाइडर का उपयोग करने के लिए है , उदाहरण के लिए शाही स्लाइडर, यहां लिंक है ->http://dimsemenov.com/plugins/royal-slider/

Answer 6

मैंने स्क्रॉलिंग के दौरान आलसी लोड लागू किया। यह समाधान यहां प्रस्तावित अन्य समाधानों की तुलना में बड़े संग्रहों के लिए बेहतर काम करता है। प्रारंभ के दौरान यह केवल पहली 5 छवियों को लोड करता है और फिर यह प्रत्येक एनीमेशन के लिए आगे 3 छवियों को लोड करता है।

<li> 
    <img class="lazy" src="loading-image.jpg" data-src="actual-image.jpg" /> 
</li> 

और जावास्क्रिप्ट कोड:

$('.flexslider').flexslider({ 
     animation: "slide", 
     animationLoop: false, 
     controlNav: false, 
     init: function (slider) { 
      // lazy load 
      $("img.lazy").slice(0,5).each(function() { 
       var src = $(this).attr("data-src"); 
       $(this).attr("src", src).removeAttr("data-src").removeClass("lazy"); 
      }); 
     }, 
     before: function (slider) { 
      // lazy load 
      $("img.lazy").slice(0,3).each(function() { 
       var src = $(this).attr("data-src"); 
       $(this).attr("src", src).removeAttr("data-src").removeClass("lazy"); 
      }); 
     } 
    });