बूटस्ट्रैप कैरोसेल आलसी लोड

Question

मैं बूटस्ट्रैप कैरोसेल आलसी लोड रखने की कोशिश कर रहा हूं। ऐसा लगता है कि यह सीधे आगे होना चाहिए, लेकिन मुझे समस्या निवारण के लिए यहां कोई त्रुटि भी नहीं मिल रही है। जे एस:

<script type="text/javascript"> 
    $('#bigCarousel').on("slid", function() { 
     // load the next image after the current one slid 
     var $nextImage = $('.active.item', this).next('.item').find('img'); 
     $nextImage.attr('src', $nextImage.data('lazy-load-src')); 
    }); 

</script> 

और फिर HTML:

<div id="bigCarousel" class="carousel slide"> 
    <div class="carousel-inner"> 
    <div class="active item"> 
     <img src="assets/bigimage1.jpg" class="img-big"> 
    </div> 
    <div class="item"> 
     <img data-lazy-load-src="assets/menu-header2.jpg" class="img-big"> 
    </div> 
</div> 
</div> 

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

Answer 1

$('#myCarousel').on('slid', function() { 
    var $nextImage = $('.active.item', this).next('.item').find('img'); 
    $nextImage.attr('src', $nextImage.data('data-lazy-load-src')); 
}); 

आप $nextImage.data('lazy-load-src') के रूप में लोड कर रहे हैं, लेकिन यह पटकथा के अनुसार $nextImage.data('data-lazy-load-src') होना चाहिए।

Answer 2

मुझे लगता है कि समस्या आपके अगले इमेज var में $ है। जब तक आप 1 स्लाइड को जल्दी से लोड करने का प्रयास नहीं कर रहे हैं, तो भी मैं "स्लीड" ईवेंट की बजाय "स्लाइड" ईवेंट पर स्विच करूंगा। साथ ही, आपको शायद आगे और पीछे स्क्रॉल करने के लिए खाता होना चाहिए। इसमें पहली तस्वीर से आखिरी तस्वीर तक और इसके विपरीत लूपिंग के लिए चेक शामिल हैं।

$('#myCarousel').on("slide", function(e) { 

     //SCROLLING LEFT 
     var prevItem = $('.active.item', this).prev('.item'); 

     //Account for looping to LAST image 
     if(!prevItem.length){ 
      prevItem = $('.active.item', this).siblings(":last"); 
     } 

     //Get image selector 
     prevImage = prevItem.find('img'); 

     //Remove class to not load again - probably unnecessary 
     if(prevImage.hasClass('lazy-load')){ 
      prevImage.removeClass('lazy-load'); 
      prevImage.attr('src', prevImage.data('lazy-load-src')); 
     } 

     //SCROLLING RIGHT 
     var nextItem = $('.active.item', this).next('.item'); 

     //Account for looping to FIRST image 
     if(!nextItem.length){ 
      nextItem = $('.active.item', this).siblings(":first"); 
     } 

     //Get image selector 
     nextImage = nextItem.find('img'); 

     //Remove class to not load again - probably unnecessary 
     if(nextImage.hasClass('lazy-load')){ 
      nextImage.removeClass('lazy-load'); 
      nextImage.attr('src', nextImage.data('lazy-load-src')); 
     } 

    }); 

Answer 3

मैं एक समाधान है, तो आप सिर्फ अस्थायी छवि विशेषता में img-यूआरएल/पथ निर्धारित करने की आवश्यकता, , देख img नीचे कोड यूआरएल

<div class="item"> 
<img url="./image/1.jpg" src=""> 
    <div class="carousel-caption"> 
    <h4>title</h4> 
    <p>content</p> 
    </div> 
</div> 

विशेषता है जब घटना गिरावट निर्धारित मूल्य: src = यूआरएल

$('document').ready(function() {  
     $('#myCarousel').on('slid', function (e) { 
      var url = $('.item.active').find("img").attr('url'); 
      $('.item.active').find("img").attr("src", url); //set value : src = url 
     }); 
}); 

Answer 4

मैंने बूटस्ट्रैप का उपयोग करके आलसी लोड कैरोसेल बनाने के लिए एक निःशुल्क छोटा कोड स्निपेट बनाया है।

कोड github https://github.com/mconventi/lazy-load-bootstrap-carousel पर एक पूर्ण कार्य उदाहरण शामिल है।

उपयोग करें और यह अनुकूलित करने के लिए स्वतंत्र महसूस;)

Answer 5

आसान समाधान होगा:

<div id="carousel" class="carousel slide lazy-load" data-ride="carousel" data-interval="false"> 
<div class="carousel-inner"> 
    <div class="item active"><img src="image1.jpg"></div> 
    <div class="item"><img data-src="image2.jpg"></div> 
    <div class="item"><img data-src="image3.jpg"></div> 
</div> 
<!-- controls --> 
<ol class="carousel-indicators"> 
    <li data-target="#carousel" data-slide-to="0" class="active"></li> 
    <li data-target="#carousel" data-slide-to="1"></li> 
    <li data-target="#carousel" data-slide-to="2"></li> 
    </ol> 
</div> 

<script> 
$(function() { 
    $('.carousel.lazy-load').bind('slide.bs.carousel', function (e) { 
     var image = $(e.relatedTarget).find('img[data-src]'); 
     image.attr('src', image.data('src')); 
     image.removeAttr('data-src'); 
    }); 
}); 
</script> 

यह है कि!