jQuery चिनाई टूट जाता है क्रोम/सफारी में लेकिन केवल पहले लोड

Question

पर ऐसा लगता है कि जब मैं पेज लोड करने का प्रयास, सभी छवियों को एक दूसरे के ऊपर खड़ी दिखती हैं (छवियों स्टैक्स)। लेकिन अगर आप एक लिंक है जो आप एक ही पृष्ठ पर (घर लिंक की तरह) तो चिनाई किक में लेता क्लिक करने के लिए थे। इसलिए मुझे लगता है चिनाई बहुत जल्दी लोड कर रहा है, जैसे पहले jQuery पेज या कुछ readies।

यहाँ मेरी jQuery कॉल:

$(document).ready(function(){ 
    $('#image_roll_container').masonry({ 
     itemSelector: '.box' 
    }); 

.... 

यहाँ विचाराधीन पृष्ठ है:

http://ratattoos.com/

यह फ़ायरफ़ॉक्स और IE8 में बस ठीक काम करता है।

Answer 1

लगता है जैसे मैं Monsry स्क्रिप्ट क्रोम और सफारी की पसंद

Answer 2

मैं निम्नलिखित ट्वीक साथ इस समस्या को दूर करने में कामयाब रहे हैं, उनके साथ ठीक से काम करने के लिए आदेश में एक प्लगइन imagesLoaded कहा जाता है की जरूरत:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('img').load(function(){ 
      $(".content_photo").masonry(); 
     }); 
     $(".content_photo").masonry(); 
    }); 
</script> 

Answer 3

आप छवियों के बारे में सही हैं। यह फ़ायरफ़ॉक्स में ठीक काम कर रहा था लेकिन क्रोम/सफारी में ढेर था।

var $container = $('#container'); 

$container.imagesLoaded(function(){ 
    $container.masonry({ 
    itemSelector : '.box' 
    }); 
}); 

Answer 4

मैं हाल ही में इस मुद्दे को भर में आया था:

यहाँ लिंक http://masonry.desandro.com/demos/images.html

कोड है। इसे ठीक करने के लिए, मैंने आईएमजी चौड़ाई और ऊंचाई विशेषताओं का उपयोग किया। इस मुद्दे को हल किया गया।

Answer 5

एक और तरीका है, अगर आप छवि ऊंचाइयों पता है, इससे पहले कि आप लोड चिनाई, तो लेआउट छवियों के लिए इंतज़ार कर की तुलना में तेजी है उन्हें सीएसएस में आवंटित करने के लिए है। यह विधि काम करती है, उदाहरण के लिए, आपकी सभी छवियां एक ही आकार के हैं। फिर आपकी साइट अभी भी मोबाइल जैसे धीमे कनेक्शन पर तुरंत लोड हो जाएगी।
http://instancia.net/loading-jquery-masonry-on-mobile/

आप इस स्क्रिप्ट का उपयोग करते हैं, संख्या तुम्हारा मैच के लिए संपादित:

मैं वैकल्पिक पद्धति यहाँ के लिए स्क्रिप्ट का एक सा था।

Answer 6

फ़ायरफ़ॉक्स पर और मेरे iPad 2 चिनाई पर ठीक काम कर रहा था, लेकिन क्रोम और ओएस एक्स पर सफारी में तत्वों पृष्ठ लोड पर और एक खिड़की हो भी आकार बदलने के लिए जब तक स्टैकिंग अतिव्यापी थे /। Jquery.masonry.js के कोड में खुदाई करने के बाद मैंने पाया कि चिनाई बनाने के बाद मैं एक आकार बदल सकता हूं ताकि सभी तत्व ठीक से व्यवस्थित हो जाएं। अब सब कुछ ठीक काम कर रहा है।

jQuery(document).ready(function(){ 
var $container = $('#container'); 
$container.imagesLoaded(function(){ 
    $container.masonry({ 
    itemsSelector: '.thumbnail', 
    isFitWidth: true 
    }).resize(); 
}); 
}) 

अन्य समाधान के सभी: (विंडो) .load, आदि, सीएसएस में और img विशेषताओं पर चौड़ाई & ऊंचाई की स्थापना, सिर्फ मेरे लिए काम नहीं किया।

Answer 7

की कोशिश की सब कुछ इस सूत्र में सुझाव दिया, कुछ भी काम किया है, तो यह पाया:

$(window).load(function(){ $('#content').masonry(); }); 

वर्क्स ठीक अब, यह पाया गया: https://github.com/desandro/masonry/issues/35

मूल पोस्ट लेखक: https://github.com/desandro

Answer 8

यह जेनिफर ने कहा कि सही ढंग से प्रदर्शित करने के लिए इन ब्राउज़रों में ऊंचाई की आवश्यकता है। मैं छवियों की ऊंचाई और चौड़ाई प्राप्त करने के लिए php के getimagesize() फ़ंक्शन का उपयोग करता हूं। अब पूरी तरह से काम करता है।

Answer 9

<script> 
     var container = document.querySelector('#masonry'); 
     var msnry = new Masonry(container, { 
      itemSelector: '.item', 
      "columnWidth": 200, 
     }); 
     $('.item img').load(function(){ 
       var msnry = new Masonry(container, { 
       itemSelector: '.item', 
       "columnWidth": 200, 
      }); 
     }) 
</script> 

Answer 10

अगर उपयोग $ ('img') लोड (function() F5 (refesh) => त्रुटि

नए तरीके:।

$(window).on('load resize', function() { 
 
    if ($('.masonry-wrap').length) { 
 
    $('.masonry-wrap') 
 
    .css('max-width', $(window).width()); 
 
    } 
 
}); 
 
$(window).on('load', function() { 
 
    if ($('.masonry-wrap').length) { 
 
    setTimeout(function() { 
 
     $('.masonry').masonry({ 
 
     columnWidth: 0, 
 
     itemSelector: '.grid-item' 
 
     }); 
 
    }, 1); 
 
    } 
 
});

<div class="masonry-wrap"> 
 
    <div class="masonry"> 
 
    <div class="grid-item">...</div> 
 
    <div class="grid-item">...</div> 
 
    .... 
 
    </div> 
 
</div>

Answer 11

" लोड "घटना डीओएम में प्रत्येक छवि के लिए ट्रिगर होगी, यह अधिक है। आपको डोम लोड में आखिरी छवि होने पर चिनाई के लेआउट को अपडेट करने की आवश्यकता है। यहां कोड है:

$(document).ready(function(){ 
    // init the masonry on document ready event; 
    // at this point the images are not loaded so the layout will break UNLESS you set up the correct values for the "width" and "height" attributes of the img tags 
    $('.content_photo').masonry(); 

    // to make sure the layout will not break apart we update the masonry layout just after the last image from the DOM was loaded 
    var total_images = $('img').length; 
    var counter = 1; 
    $('img').load(function() { 
     if(counter == total_images) { 
      alert('the last image in the DOM was loaded. now we can update the masonry layout'); 
      $('.content_photo').masonry('layout'); 
     } 
     counter++; 
    }); 
}); 

Answer 12

मुझे वर्णित विपरीत समस्या थी: पहला लोड मैक ओएस एक्स सफारी में ठीक काम करता था, लेकिन सभी नए आइटमों के साथ ग्रिड को बदलने से उन्हें सभी बाएं कोने में ढेर हो गया। इसके अलावा, तैयार घटनाओं की प्रतीक्षा कर रहे हैं और सीएसएस ऊंचाई & हमारे तत्वों की चौड़ाई को ठीक नहीं किया है।

हमारी साइट पर, हमारे पास डेटा की श्रेणियां हैं जो चिनाई ग्रिड में प्रदर्शित होती हैं, और एक समय में केवल एक श्रेणी में दिखाती हैं। कोई उपयोगकर्ता किसी भी समय श्रेणी स्विच कर सकता है और नए डेटा में लोड करने के लिए AJAX अनुरोध को ट्रिगर कर सकता है। नवीनतम सफारी (9.1, 10) और Chrome जैसे ब्राउज़र में, हम बस जब श्रेणी बदलने के सभी नए तत्वों में स्वैप करने के लिए ऐसा कर सकता है:

// domData is HTML string from the server 
    // IMJS is our global variable that we use for globals and lookups 
    $("#divTemplateCategoryName").after(domData); // insert new HTML 
    var elementsToAdd = $(".grid-item-template-info"); //select the elements 
    IMJS.MasonryGrid.masonry('addItems', elementsToAdd); // tell masonry to add them 
    IMJS.MasonryGrid.masonry('layout'); // tell masonry to layout again 

हालांकि, सफ़ारी के कुछ संस्करणों कि काम नहीं होता है, और लेकिन इसके बदले हम यह करने के लिए किया था:

// domData is HTML string from the server 
    // IMJS is our global variable that we use for globals and lookups 
    IMJS.MasonryGrid.masonry('destroy'); // destroy the grid 
    $("#divTemplateCategoryName").after(domData); // insert new HTML 
    InitMasonry(); // re-do our entire masonry init 

क्योंकि मैं समय हर ब्राउज़र संस्करण है कि इस बग से प्रभावित हो सकता को ट्रैक करने की जरूरत नहीं है, मैं सभी ब्राउज़रों के लिए बाद विधि करने लगे।