एक छिपी हुई div

Question

में jQuery LazyLoad छवियों में मेरे पास एक छिपी हुई div में छवियों का एक समूह है। जब div कुछ लिंक पर क्लिक करता है तो div दिखाया जाता है।

मैं इन छवियों को छिपाने के लिए jQuery lazyload करना चाहता हूं जब तक लिंक क्लिक नहीं किया जाता है और छुपा div प्रकट होता है। लेकिन, अगर मैं प्रलेखन के अनुसार lazyload का उपयोग करता हूं, तो छवियों को हमेशा लोड किया जाता है क्योंकि छुपा div व्यूपोर्ट में है, संभवतः।

कोई विचार?

Answer 1

टीमो मुझे लगता है कि वह वैसे भी नहीं चाहता है कि डोम में भार छवियों इससे पहले कि वह उन्हें जरूरत है। किसी भी तरह यह सामग्री लोड करने के लिए AJAX का उपयोग करने का एक क्लासिक परिदृश्य है।

मेरा प्रस्ताव है कि आप इस

$.fn.image = function(src, f) { 

     return this.each(function() { 

      var i = new Image(); 

      i.src = src; 

      i.onload = f; 

      this.appendChild(i); 

     }); 
    } 

    $(function() { 


     $('yourlink').click(function() { 

      $("#container").image("image.jpg", function() { 

       alert("image loaded"); 

      }); 
     }); 

    }); 

Answer 2

क्या आपको वास्तव में आलसी लोड प्लगइन की आवश्यकता है? जब आप लिंक पर क्लिक करते हैं तो छवि सामग्री के साथ div सामग्री को बदलने के बारे में कैसे?

कुछ की तरह:

<a href="link" onclick="show_images('div_id');">asdf</a> 

और

function show_images(id) { 
    $('#' + id).append('<img src="image1.jpg" /><img src="imagex.jpg" />'); 
} 

Answer 3

मैं एचटीएमएल टिप्पणियों का उपयोग करता है एक टिप्पणी ब्लॉक के अंदर दोनों छवियों और किसी भी मनमाने ढंग से एचटीएमएल लोड करने के लिए एक jQuery प्लगइन लिखा था की तरह इसके बारे में जाना। http://plugins.jquery.com/project/LazyLoadOnScroll

यह इस तरह काम करता है:: http://bit.ly/eXxK1c

यहाँ प्लगइन पेज है:

यहाँ लेख/डॉक्स है

<pre class=”i-am-lazy” ><!– 
    <img src=”some.png” /> 
–></pre> 

<pre class=”i-am-lazy” ><!– 
    <div>Whatever html you want lazy loaded</div> 
–></pre> 

<script type=”text/javascript” src=”jquery.lazyloader.js” ></script> 
<script type=”text/javascript” > 

$(document).ready(function() 
{ 
    $(’pre.i-am-lazy’).lazyLoad(); 
}); 

</script> 

जब पूर्व टैग ब्राउज़र व्यूपोर्ट में दिखाई देने लगते प्लेसहोल्डर टैग टिप्पणी के अंदर एचटीएमएल स्ट्रिंग के साथ प्रतिस्थापित कर रहे हैं। आप किसी भी प्रकार के टैग को प्लेसहोल्डर के रूप में उपयोग कर सकते हैं, न केवल पूर्व, बल्कि मुझे पूर्व पसंद है क्योंकि इसमें कोई टिप्पणी होने पर 0 आयाम के रूप में प्रस्तुत किया जाता है।

Answer 4

आप इस समाधान को भी आजमा सकते हैं। अपनी छवि के साथ पहले दे छवि उचित डेटा-स्वैप विशेषता

<div id="imgcontainer"> 
    <img data-swap="url/to/your/image1.jpg" class="swapimg" alt="image name"> 
    <img data-swap="url/to/your/image2.jpg" class="swapimg" alt="image name"> 
    <img data-swap="url/to/your/image3.jpg" class="swapimg" alt="image name"> 
</div> 

यूआरएल और फिर वह विशेषता डेटा-स्वैपsrc और क्या करने के लिए स्वैप करने के लिए jQuery का उपयोग करने के रूप में वास्तव में महत्वपूर्ण है - जाँच करता है, तो इस छवि को नहीं दिखाया गया था अगर कथन का उपयोग करने से पहले। बस प्रदर्शन के लिए :)

var imgs = $('.swapimg'); 

$("#imgcontainer").click(function() { 
    if (imgs.attr("src") != imgs.attr("data-swap")) { 
     imgs.each(function() { 
      $(this).attr('src', $(this).attr("data-swap")); 
     }); 
    } 
});