Jasbir Bhinder Jasbir Bhinder - 3 months ago 10
ASP.NET (C#) Question

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" });
}

Answer

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.

Comments