सामग्री में छवियों को शामिल करें और चिनाई चिनाई

Question

मेरे पास एक XML फ़ाइल है जिसमें छवियों की एक सूची है, मैं इन छवियों को एक कंटेनर में लोड करना चाहता हूं और फिर चिनाई लागू करना चाहता हूं।

मैंने छवियों को लोड करने की प्रतीक्षा करने की कोशिश की है, http://masonry.desandro.com/demos/images.html। प्रत्येक छवि को जोड़ा जाने के बाद मैंने पुनः लोड करने का प्रयास किया है - http://masonry.desandro.com/docs/methods.html#reload

इनमें से कोई भी काम नहीं कर रहा है।

यहां मेरा कोड है, मुझे यकीन नहीं है कि मैं कहां गलत हो रहा हूं।

$('.content').masonry(); 
    var elements = ''; 


    $.ajax({ 
     type: "GET", 
     url: "/galleries/_archive/PhotoGallery.xml", // replace with absolute URL of your gallery's xml file 
     dataType: "xml", 
     success: function(xml) { 
      jQuery(xml).find('img').each(function(i) { 
       var location = "/galleries/_archive/"; // replace with absolute path to the directory that holds your images 
       var url = jQuery(this).attr('src'); 
       var alt = jQuery(this).attr('alt'); 

      elements+= '<div class="image-div"><img class="round'+i+'" src="'+location+''+url+'" alt="'+alt+'"/></div>'; 

     }); 

     $('.content').append(elements).shuffle().masonry('reload'); 
     //$(".content .image-div").shuffle(); 
     } 
    }); 

मैं इस पर ध्यान दिया है - jquery, masonry after append complete और इस jQuery Masonry and Ajax Append Items?

मैं सिर्फ पुनः लोड करने पर अगर सोच रहा हूँ छवियों को लोड करने के लिए प्लगइन का इंतजार करना चाहिए? यदि ऐसा है तो इसके लिए वाक्यविन्यास क्या है? , उन्हें एक यादृच्छिक क्रम में शफ़ल और फिर उन्हें तो चिनाई उन्हें में फीका

कोई मदद अद्भुत होगा, मैं स्टंप्डया हूँ।:

मैं भी ब्लॉक (छिपा दृश्यता) को छिपाने के लिए योजना है। बहुत बहुत धन्यवाद

Answer 1

jQuery .load() फ़ंक्शन समस्या को हल करने में मदद करेगा।

निम्न कोड के साथ

प्रयास करें,

var totalImage = 0, imageCount = 0; 
$.ajax({ 
    type: "GET", 
    url: "/galleries/_archive/PhotoGallery.xml", // replace with absolute URL of your gallery's xml file 
    dataType: "xml", 
    success: function(xml) { 
     totalImage = jQuery(xml).find("img").length; 
     jQuery(xml).find('img').each(function(i) { 
      var location = "/galleries/_archive/"; // replace with absolute path to the directory that holds your images 
      var url = jQuery(this).attr('src'); 
      var alt = jQuery(this).attr('alt'); 

     elements+= '<div class="image-div"><img class="round'+i+'" src="'+location+''+url+'" alt="'+alt+'"/></div>'; 

    }); 

    $('.content').append(elements).shuffle(); 

    $('.image-div img').load(function() { 
     imageCount++; 
     if(totalImage == imageCount){ 
     $('.content').masonry('reload'); 
     } 
}); 

मैं totalImage और imageCount चर बनाया। छवि लोड इवेंट पर मैंने जांच की है कि सभी छवियां पूर्ण हैं। यदि कुल छवि और छवि गणना समान है तो सभी लोड लोड हो गए हैं, इसलिए मैंने masonry('reload') फ़ंक्शन कहा।

Answer 2

ऐसा लगता है कि छवियों को पूरी तरह से लोड होने से पहले मेसनरी डीओएम पर काम कर रही है। imagesLoaded विधि है कि चिनाई के साथ आता है इसे ठीक करने का उपयोग करें:

संपादित करें: मात्रा में भार छवियों, प्रत्येक हिस्सा दृश्यमान हो सकती है जब उसके छवियों पूरी तरह से लोड किए गए हैं:

सीएसएस

.hidden { 
    display: none; 
} 

जावास्क्रिप्ट

/* 
* Splits an array into subarrays of length "len". 
* 
* see: http://stackoverflow.com/a/11764168/159570 
*/ 
function chunk(arr, len) { 
    var chunks = []; 
    var i = 0; 
    var n = arr.length; 
    while (i < n) { 
     chunks.push(arr.slice(i, i += len)); 
    } 
    return chunks; 
} 

var chunkSize = 10; // images per chunk 
var $content = $('.content').masonry(); 
$.ajax({ 
    type: "GET", 
    url: "/galleries/_archive/PhotoGallery.xml", 
    dataType: "xml", 
    success: function(xml) { 
     var allImages = $(xml).find('img').get(); 
     var imageArrayChunks = chunk(allImages, chunkSize); 
     $.each(imageArrayChunks, function(i, imageArray) { 
      var elements = ''; 
      $.each(imageArray, function(j, image) { 
       var location = "/galleries/_archive/"; 
       var $image = $(image); 
       var url = $image.attr('src'); 
       var alt = $image.attr('alt'); 
       var index = i*j + j; // original unchunked index 
       elements += '<div class="image-div hidden"><img class="round'+index+'" src="'+location+url+'" alt="'+alt+'"/></div>'; 
      }); 
      $content.append(elements).shuffle(); 
      $content.imagesLoaded(function(images) { 
       $content.masonry('reload'); 
       $(images).parent().removeClass('hidden'); 
      }); 
      console.log('Chunk #'+i+' loaded...'); 
     }); 
    } 
}); 

Answer 3

यदि आप अपनी एक्सएमएल फ़ाइल के अंदर प्रत्येक तत्व की ऊंचाई और चौड़ाई को स्टोर कर सकते हैं। आप अपने परिशिष्ट विवरण में उन आयामों का उपयोग कर सकते हैं। ऐसा करने से चिनाई को ब्राउज़र में छवियों को लोड करने की प्रतीक्षा किए बिना काम करने की अनुमति मिल जाएगी। इस तरह ब्राउज़र को छवियों को लोड करने के बाद लेआउट को 'रीफ्लो' नहीं करना पड़ेगा, जिसके परिणामस्वरूप एक आसान अनुभव (कम "जंकिंग" या बाउंसिंग) और तेज़ माना गया पृष्ठ लोड होता है।

इसके अलावा इसे लागू करने के लिए बहुत आसान सरल है, (विशेष रूप से आपको किसी भी तरह से XML फ़ाइल उत्पन्न करना है)।

var elements = ''; 

$.ajax({ 
    type: "GET", 
    url: "/galleries/_archive/PhotoGallery.xml", // replace with absolute URL of your gallery's xml file 
    dataType: "xml", 
    success: function(xml) { 
     jQuery(xml).find('img').each(function(i) { 
      var location = "/galleries/_archive/"; // replace with absolute path to the directory that holds your images 

      var that= jQuery(this), 
       url = that.attr('src'), 
       alt = that.attr('alt'), 
       h = that.attr('height'), 
       w = that.attr('width'); 

     elements+= '<div class="image-div"><img class="round'+i+'" src="'+location+''+url+'" alt="'+alt+'" height="'+h+'" width="'+w+'"/></div>'; 

    }); 

    $('.content').append(elements).shuffle().masonry(); 
    } 
}); 

---

बस मस्ती के लिए:

सीएसएस

.content img{ 
    opacity:0; 
    -moz-transition:opacity 1s; 
    -webkit-transition:opacity 1s; 
    transition:opacity 1s; 
} 

.content .loadedImg{ 
    opacity:1; 
} 

जे एस

$('.content').on('load', 'img', function(){ 
    $(this).addClass('loadedImg'); 
}); 

सिद्धांत छवियों में अब एक बार वास्तविक अच्छा में फीका करना होगा y पूरी तरह से css3 समर्थित ब्राउज़र में लोड हो गए हैं।