CODEWITHSUNDEEP
javascriptjqueryasp.netjquery-masonry
JSB
JSB

Reputation: 234

On refreshing page masonry work ok, but first time overlaps

When my page load first time masonry overlaps images, and if i refresh page it start work fine. i dnt have any idea what i did wrong. my page link is this www.bhinderblink.com

<script type="text/javascript">
    $(window).load(function () {
        $('#container').masonry({
            // options
            itemSelector: '.box',
            columnWidth: 240,
            isAnimated: true,
             isFitWidth: true,
            animationOptions: {
                duration: 650,
                easing: 'linear',
                queue: false
            }
        });
    });   


</script>

On Success of .ajax, it fetch data from xmlobject...

function OnSuccess(response) {
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);

        pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());

        var pic_infoVar = xml.find("pic_info");

        pic_infoVar.each(function () {
            var customer = $(this);
            //...........

            var $picString = $("<div class='box'><img id='theImg' src='/pic/jas/" + customer.find("pic_name").text() + ".jpg" + "'/><div>Detail2</div></div>");
            $("#container").append($picString).masonry('appended', $picString, true);

        });

        $("#imgloader").hide();
        $("body").css({ "opacity": "100" });
    }

Upvotes: 7

Views: 6783

Answers (2)

Sandeep Tawaniya
Sandeep Tawaniya

Reputation: 717

It's because of the script is being run before the content (Images) is not fully loaded. Hence the positioning error.

Try this :-

<head>
<script>
      $(window).load(function(){
          $('#selector').masonry({
               itemSelector : '.item',
               columnWidth : 200,
               isAnimated: true,
               animationOptions: {
                    duration: 700,
                    easing: 'linear',
                    queue: false
               }
          });
      });
</script>
</head>

Upvotes: 2

user2196414
user2196414

Reputation: 146

I also has the similar issue, images were overlapping at the first loading time. I overcome this by first loading the images.

 $(".id").imagesLoaded(function(){
    $('.id').masonry({
                itemSelector: '.scrapcontent',
                columnWidth: 3,
                isAnimated:true,
                animationOptions: {
                    duration: 700,
                    easing:'linear',
                    queue :false
               }
         });
}

If the images are loaded then only your masonry's duty has to start.It should work fine.

Upvotes: 12

Related Questions