如何在砌石之前加载脚本

我对javascript还很陌生，如果描述得很糟糕，请耐心等待。。。如果有人能花时间帮我检查这个代码，我相信有一个简单的解决方案：

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

^我的测试站点

我正在尝试使用Masonry，但卸载的图像会导致元素重叠。（在Masonry附录页面中）提供了一个名为ImagesLoaded的解决方案，我尝试过，但无法使其发挥作用。然后我想，ImagesLoaded可能不起作用，因为导致问题的图像是由另一个javascript生成的。。。

我正在使用一个从你的tumblr博客中提取最新图像的脚本。这是我最新的tumblr图片，在Masonry排列我的元素之前没有加载。所以tumblr元素之后的元素总是出现在它的顶部。（我不能设置图像的高度，因为它总是变化的。）

我想我的问题是；在Masonry可以排列我的元素之前，我如何让tumblr脚本加载我最新的tumblr图像？

嗨，又是我@Rishit Bansal！我终于详细研究了你的问题，得到了经过测试的解决方案！与之前的回答相比，有很多新的编辑，所以我发布了一个新的答案。。。。好吧，这就是你要做的-1.制作一个新的js文件，并将其命名为arrangemasonry.js。这是arrangemasonry.js-中的代码

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

2.将文件保存在与index.html相同的文件夹中。3.这是index.html编辑的正确代码-

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.这应该可以像我测试过的那样工作。耐心等待页面加载，因为只有在图像完全加载后，图像才会被排列。如果你还有其他问题，请告诉我。

我想这可能对你有用-将tumblr代码保存在index.html文件中的某些脚本标记之间。现在，您可以编写这样的javascript，以便只有在加载了索引页面之后才能加载外部砖石文件-

<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>

我希望这能解决你的问题！如果你不理解我答案的一部分，我可以自由编辑，只需评论。。。。PS：请确保删除您之前添加到masonry.pkgd.min.js 的任何脚本标记

相关内容

最新更新

热门标签：