如何在砌筑之前加载脚本? [英] How do I get a script to load before masonry?
问题描述
我对javascript还是很陌生，所以如果对它的描述太过恐怖，请忍受...我敢肯定，如果有人可以花时间为我检查这段代码，那么有一个简单的解决方案:
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
^我的测试站点
我正在尝试使用石工，但未加载的图像导致元素重叠.我尝试过提供一个名为ImagesLoaded的解决方案(在砌体"附录中)，但无法使其正常工作.然后我想，ImagesLoaded可能无法工作，因为引起问题的图像是由另一个JavaScript生成的.
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...
我正在使用一个脚本，该脚本从您的tumblr博客中获取最新图像.这是我最新的tumblr图片，在Masonry整理我的元素之前没有加载.因此，tumblr元素之后的元素始终显示在其顶部. (我无法设置该图像的高度，因为它总是在变化.)
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.)
我想我的问题是；如何在Masonry布置元素之前让tumblr脚本加载我的最新tumblr图像?
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?
推荐答案
我又是@Rishit Bansal！我终于详细调查了您的问题，并获得了经过测试的解决方案！比以前的分析器有很多新的编辑，所以我发布了一个新的答案....好吧，这是您必须要做的- 1.制作一个新的js文件，并将其命名为rangingmasonry.js.这是arrangemasonry.js-
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.将该文件保存在与index.html相同的文件夹中. 3.这是index.html编辑的正确代码-
2.save the file in the same folder as index.html. 3.Here is the index.html edited correct code-
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">•</font>
<a href="http://bubblejam.tumblr.com/tagged/ASOS" target="_blank" style="text-decoration:none;">ASOS</a>
<font color="#000000" size="-3">•</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">•</font>
<a href="http://bubblejam.tumblr.com/tagged/joythestore" target="_blank" style="text-decoration:none;">JOY</a>
<font color="#000000" size="-3">•</font>
<a href="http://bubblejam.tumblr.com/tagged/vice" target="_blank" style="text-decoration:none;">Vice</a>
<font color="#000000" size="-3">•</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">•</font>
<a href="http://bubblejam.tumblr.com/tagged/buballs" target="_blank" style="text-decoration:none;">Buballs</a>
<font color="#000000" size="-3">•</font>
<a href="http://bubblejam.tumblr.com/tagged/don%27t-panic" target="_blank">
Don't Panic</a> <font color="#000000" size="-3">•</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 & 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.这应该可以像我测试过的那样工作.请耐心等待页面加载，因为只有在图像完全加载后才会排列图像.如果还有其他问题，请告诉我.
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.
这篇关于如何在砌筑之前加载脚本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
