我有一个脚本，可以使用jQuery动态添加html代码（在文本文件中循环并加载图像）。之后，我将动态CSS样式和onclick事件应用于先前加载的图像。
当我第一次加载页面时，它工作正常。但是，当我刷新（正常F5）时，脚本以相反的顺序执行（首先更改CSS和事件，然后添加html代码），因此显然图像没有我需要的CSS和事件。
我知道它们以相反的顺序执行，因为我已经使用警报“调试”了。而且，它们在第一次加载时的显示顺序与第二次刷新时的显示顺序相反。
我怀疑这是与加载事件（加载，DOMload等）有关的时间问题。
我在这里问是因为我所能找到的只是关于存在相反问题的人的帖子。他们的代码在第一次加载时不起作用，但是刷新后可以正常工作。我没有找到有关我的问题的帖子。
这是我的index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Magnum</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="fonts/font-awesome/css/font-awesome.css">
<!-- Stylesheet
================================================== -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/nivo-lightbox/nivo-lightbox.css">
<link rel="stylesheet" type="text/css" href="css/nivo-lightbox/default.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,600,300' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<div id="nav">
<nav class="navbar navbar-custom">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse"> <i class="fa fa-bars"></i> </button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden"> <a href="#page-top"></a> </li>
<li> <a class="page-scroll" href="#about">About</a> </li>
<li> <a class="page-scroll" href="#portfolio">Portfolio</a> </li>
<li> <a class="page-scroll" href="#contact">Contact</a> </li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Portfolio Section -->
<div id="portfolio">
<div class="container">
<div class="section-title text-center center">
<h2>Portfolio</h2>
<hr>
</div>
<div class="categories">
<ul class="cat">
<li>
<ol class="type">
<li><a href="#" data-filter="*" class="active">All</a></li>
<li><a href="#" data-filter=".graphic">Graphic Design</a></li>
<li><a href="#" data-filter=".illustration">Illustration</a></li>
<li><a href="#" data-filter=".photography">Photography</a></li>
</ol>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="row">
<div class="portfolio-items" id="portfoli">
<div class="col-sm-6 col-md-3 col-lg-3 graphic">
<div class="portfolio-item">
<div class="hover-bg"> <a href="img/portfolio/01-large.jpg" title="Project Title" data-lightbox-gallery="gallery1">
<div class="hover-text">
<h4>Project Title</h4>
</div>
<img src="img/portfolio/01-small.jpg" class="img-responsive" alt="Project Title"> </a> </div>
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-3 illustration">
<div class="portfolio-item">
<div class="hover-bg"> <a href="img/portfolio/02-large.jpg" title="Project Title" data-lightbox-gallery="gallery1">
<div class="hover-text">
<h4>Project Title</h4>
</div>
<img src="img/portfolio/02-small.jpg" class="img-responsive" alt="Project Title"> </a> </div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="js/MostrarPortfoliIllustracio.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.1.11.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/SmoothScroll.js"></script>
<script type="text/javascript" src="js/nivo-lightbox.js"></script>
<script type="text/javascript" src="js/jquery.isotope.js"></script>
<script type="text/javascript" src="js/jqBootstrapValidation.js"></script>
<script type="text/javascript" src="js/contact_me.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
这是从txt文件（MostrarPortfoliIllustracio.js）动态添加html的脚本：
$.get('portfoli.txt', function(data) {
console.log("x.x");
var lines = data.split('\n');
var foto = [];
for (var i = 0; i < lines.length; i++) {
alert("---> " + i);
foto[i] = lines[i].split(";");
document.getElementById("portfoli").innerHTML += '<div class="col-sm-6 col-md-3 col-lg-3 ' + foto[i][0] + '">' +
'<div class="portfolio-item">' +
'<div class="hover-bg"> <a href="img/portfolio/' + foto[i][1] + '" title="' + foto[i][2] + '" data-lightbox-gallery="gallery1">' +
'<div class="hover-text">' +
'<h4>' + foto[i][3] + '</h4>' +
'</div>' +
'<img src="img/portfolio/' + foto[i][4] + '" class="img-responsive" alt="Project Title"> </a> </div>' +
'</div>' +
'</div>';
}
}, 'text');
这是main.js脚本，用于修改标签css和事件：
function main() {
(function() {
'use strict';
$('a.page-scroll').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 40
}, 900);
return false;
}
}
});
// affix the navbar after scroll below header
$('#nav').affix({
offset: {
top: $('header').height()
}
});
// Portfolio isotope filter
$(window).load(function() {
console.log("o.o");
var $container = $('.portfolio-items');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
$('.cat a').click(function() {
$('.cat .active').removeClass('active');
$(this).addClass('active');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
return false;
});
});
// Nivo Lightbox
$('.portfolio-item a').nivoLightbox({
effect: 'slideDown',
keyboardNav: true,
});
}());
}
main();