How do I get a script to load before masonry?

StackOverflow https://stackoverflow.com/questions/23172745

Question

I'm quite new to javascript so bear with me if this is described quite horribly... I'm sure there's a simple solution if someone could take the time to check this code for me:

http://nang-nang.net/masonry/index.html

^My test site

I'm trying to use Masonry but unloaded images are causing elements to overlap. There is a solution provided (in the Masonry appendix page) called ImagesLoaded, which I tried, but I couldn't get it to work. Then I thought, ImagesLoaded might not be working because the image that is causing the problem is being generated by another javascript...

I'm using a script that pulls the latest image from your tumblr blog. It's my latest tumblr image that isn't loading before Masonry arranges my elements. So the element after the tumblr element always appears on top of it. (I can't set the height of that image because it always varies.)

I guess my question is; how to do I get the tumblr script to load my latest tumblr image before Masonry can arrange my elements?

Was it helpful?

Solution

Hi it's me @Rishit Bansal again! I finally looked into your problem in detail and got the tested solution! There was a lot of new edits than the previous anser so i posted a new answer.... Ok anyway here is what you have to do- 1. Make a new js file and call it arrangemasonry.js . Here is the code in arrangemasonry.js-

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
itemSelector: '.item'
});

2.save the file in the same folder as index.html. 3.Here is the index.html edited correct code-

index.html-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Masonry</title>


<style type="text/css">
body {
    background-image: url(http://www.nang-nang.net/concrete3.jpg);
    background-repeat: repeat;
    margin: 0px;
    padding: 0px;
}
@font-face {
    font-family: 'bebas_neueregular';
    src: url('http://www.nang-nang.net/tumblr/bebasneue-webfont.eot');
    src: url('http://www.nang-nang.net/tumblr/bebasneue-webfont.eot?#iefix') format('embedded-opentype'), url('http://www.nang-nang.net/tumblr/bebasneue-webfont.woff') format('woff'), url('http://www.nang-nang.net/tumblr/bebasneue-webfont.ttf') format('truetype'), url('http://www.nang-nang.net/tumblr/bebasneue-webfont.svg#bebas_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
h1 {
    font-family: "bebas_neueregular", Arial Narrow, Arial;
    font-size: 60px;
    font-weight: 100;
    line-height: 0px;
    margin-bottom: 10px;
    color: #666666;
    text-transform: uppercase;
}
h2 {
    font-family: "bebas_neueregular", Arial;
    font-size: 20px;
    font-weight: 100;
    line-height: 20px;
    color: #a80000;
    text-transform: uppercase;
}
a:link {
    color: #a80000;
    border-bottom: 0px;
    text-decoration: none;
}
a:active {
    color: #a80000;
    border-bottom: 0px;
    text-decoration: none;
}
a:hover {
    color: #a9a9a9;
    border-bottom: 0px;
    text-decoration: none;
}
a:visited {
    color: #a80000;
    border-bottom: 0px;
    text-decoration: none;
}
.item {
    width: 300px;
    left: 0px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 20px;
    background-image: url(http://www.nang-nang.net/portfolio/images/80bg.png);
    font-family: Lucida Grande, Arial, Helvetica, sans-serif;
    font-size: 10px;
}
</style>
</head>

<body>

<div id="container">




    <!-- ///// ONE /////-->
    <div class="item">
        <h1>Nang-nang</h1>
        <font face="Times New Roman, Times, serif" size="5">
    ..................................................
    </font>
        <div style="font-size:14px;">nang-nang.net is the portfolio of digital designer Sam Roberts, who also goes by the online moniker <em>bubblejam</em>
        </div>
    </div>





    <!-- ///// TWO /////-->
    <div class="item">
        <a href="http://bubblejam.tumblr.com/tagged/places-I-have-worked" target="_blank">
            <h1>Worked for</h1>
        </a>
        <font face="Times New Roman, Times, serif" size="5">
    ..................................................
    </font>
        <span style="font-family:Lucida Grande, Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold;">
    <a href="" target="_blank"  style="text-decoration:none;">Ted Baker</a> 
    <font color="#000000" size="-3">&bull;</font> 
    <a href="http://bubblejam.tumblr.com/tagged/ASOS" target="_blank"  style="text-decoration:none;">ASOS</a> 
    <font color="#000000" size="-3">&bull;</font> 
    <a href="http://bubblejam.tumblr.com/tagged/by-the-scruff" target="_blank"  style="text-decoration:none;">By The Scruff</a> 
    <font color="#000000" size="-3">&bull;</font> 
    <a href="http://bubblejam.tumblr.com/tagged/joythestore" target="_blank"  style="text-decoration:none;">JOY</a> 
    <font color="#000000" size="-3">&bull;</font> 
    <a href="http://bubblejam.tumblr.com/tagged/vice" target="_blank"  style="text-decoration:none;">Vice</a> 
    <font color="#000000" size="-3">&bull;</font> 
    <a href="http://bubblejam.tumblr.com/tagged/tv-print-factory" target="_blank"  style="text-decoration:none;">TV Print Factory</a> 
    <font color="#000000" size="-3">&bull;</font> 
    <a href="http://bubblejam.tumblr.com/tagged/buballs" target="_blank"  style="text-decoration:none;">Buballs</a> 
    <font color="#000000" size="-3">&bull;</font> 
    <a href="http://bubblejam.tumblr.com/tagged/don%27t-panic" target="_blank">
    Don't Panic</a> <font color="#000000" size="-3">&bull;</font> 
    <a href="http://bubblejam.tumblr.com/tagged/twentysix-london" target="_blank">  
    Twentysix Digital</a>
    </span>
    </div>



    <!-- ///// THREE /////-->
    <div class="item">
        <h2>Nang-nang photoblog</h2>

        <!--start of tumblr script
        taken from http://jiapps.com/free-stuff/tumblr-widget-for-your-website.html 
    -->

        <div class='ji-tumblr-photos' style="max-width:280px; overflow:hidden; border:solid 10px white; text-align:center;">
            <a id='ji-tumblr-url--1' href=''>
                <img border='0' style='margin-left:-25%;' id='ji-tumblr-photo--1' src='' alt='' />
            </a>

        </div>
        <script type='text/javascript' src='http://bubblejam.tumblr.com/api/read/json?number=1&type=photo'></script>
        <script type='text/javascript'>
        document.getElementById('ji-tumblr-photo--1').setAttribute('src', tumblr_api_read.posts[0]['photo-url-400']);
        document.getElementById('ji-tumblr-url--1').setAttribute('href', 'http://bubblejam.tumblr.com');
        </script>
        <!-- end of tumblr script-->

        <br />A collection of illustration, art, GIFs, cartoons, music, fashion, videos &amp; all round design that I find candid or inspirational. <em>Since Aug 2012.</em>
        <br />
        <br />
        <a href="http://bubblejam.tumblr.com" target="_blank" title="bubblejam on Tumblr">bubblejam on tumblr >></a>
    </div>





    <!-- ///// FOUR /////-->
    <div class="item">
        <h2>Instagram</h2>
        <!-- SnapWidget -->
        <iframe src="http://snapwidget.com/in/?u=bmFuZ25hbmduZXR8aW58MjgwfDF8MXx8bm98MHxub25lfG9uU3RhcnR8bm8=&v=19414" title="Instagram Widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:solid 10px white; overflow:hidden; width:280px; height:280px"></iframe>
        <br />
        <br />
        <a href="http://instagram.com/nangnangnet" target="_blank" title="nangnangnet on Instagram">nangnangnet on Instagram >></a>
    </div>





    <!-- ///// FIVE /////-->
    <div class="item">
        <iframe width="300" height="300" src="tweets2.html" frameborder="0" scrolling="no"></iframe>
        <br />
        <br />
        <a href="http://twitter.com/bubblejam" target="_blank" title="bubblejam on twitter">bubblejam on twitter >></a>
    </div>





</div>
<script type="text/javascript">
function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "arrangemasonry.js";
    document.body.appendChild(element);
}
if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>




<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="masonry.pkgd.min.js"></script>
</body>

</html>

3.This should work as i have tested it.Wait patiently for the page to load as the images will get arranged only after the images have full loaded.Tell me if you have any further problems.

OTHER TIPS

I think this might work out for you- Keep the tumblr code in the index.html file itself between some script tags. Now you can write some javascript like this so that the external masonry file is loaded only after the index page has loaded-

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "masonry.pkgd.min.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

I hope this solved your problem! If you didnt understand a part of my answer i am free to more edits, just comment.... PS:Be sure to remove any script tags you added before to masonry.pkgd.min.js

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top