为什么需要四次或五次刷新才能在屏幕上获得API图像/对象？(Jquery/HTML)
为什么需要四次或五次刷新才能在屏幕上获得API图像/对象？(Jquery/HTML)
提问于 2017-08-28 09:56:28
这里有点新手。
我正在编写一个搜索函数，它将基于api的所有旋转木马图像加载到我的数据库中。我用物化做旋转木马。
所以..。首先，它启动与'all'，类似的事情。
然后，当您在输入中输入键时，它会过滤并根据过滤后的对象数组重新呈现旋转木马图像。
所以问题：-
1)当我第一次加载localhost:3000时，图像显示之前需要五到六页刷新。那么，在数据准备好之前，HTML是否已经加载了？
2)当我输入一个搜索时，它确实会正确地过滤，当我创建一个具有完全相同的类/id名称的新元素集并将html更改为这些元素时，屏幕上不会显示任何内容。
注意:我怀疑这与在启动时必须刷新页面负载的问题相同。但我不能刷新页面，因为这样可以清除搜索，并将我带回'all‘。
我在这里错过了什么？您在jquery/javascript中添加了什么，以确保HTML等待Jquery完成创建元素，并将它们附加到新的、重新创建的div中等等？还是有什么方法可以让所有的事情都发生，以确保正确的流程发生？
HTML:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<div id="carouselId" class="carousel">
// carousel items in here are. Docs say they each 'tile' should be like this:
<a class="carousel-item" href="#linktoSomewhere">
<img src="https://lorempixel.com/250/250/nature/1">
</a>
</div>
</body>整个HTML头部和上体部分如下所示：
Javascript/Jquery
var wrapper = document.getElementById('carouselId');
var searchTerm;
$(document).ready(function($) {
$('#searchBoxText').on('input', function(e) {
searchTerm = e.target.value;
populateCarousel();
});
});
function populateCarousel() {
var moviesArray = [];
var tempResultsArr = [];
fetch('http://localhost:3000/getdata')
.then((res) => res.json())
.then((json) => {
moviesArray = json;
if (typeof searchTerm === 'undefined') {
moviesArray.map((each) => {
var eachTile = document.createElement("a");
var imageForEachTile = document.createElement("img");
imageForEachTile.setAttribute('src', each.poster);
eachTile.setAttribute("class", "carousel-item thumbnail-item");
eachTile.setAttribute("href", "#linkToSomeWhere");
eachTile.innerHTML = each.title;
eachTile.appendChild(imageForEachTile);
wrapper.appendChild(eachTile);
})
} else {
// as soon as you type, you nuke the existing html.
$('#carouselId').html('');
// function that filters api down to relevant objects/results
function checkWords(st, arr) {
let term = st.toLowerCase();
return arr.filter(each => each.title.toLowerCase().indexOf(term) === 0);
}
// place search results in 'filteredArray'
let filteredArray = checkWords(searchTerm, moviesArray);
// creating a whole new wrapper and carousel component
// to replace the nuked one.
let newWrapper = document.createElement('div')
newWrapper.setAttribute('id', 'carouselId');
newWrapper.setAttribute('class', 'carousel');
// map through the array and create a new image and attribute
// tag for each, to append to the *NEW* carousel wrpaper.
filteredArray.map((each) => {
var eachTile = document.createElement('a');
var imageForEachTile = document.createElement('img');
imageForEachTile.setAttribute('src', each.poster);
eachTile.setAttribute('class', 'carousel-item thumbnail-item');
eachTile.setAttribute('href', '#linkToSomeWhere');
eachTile.innerHTML = each.title;
eachTile.appendChild(imageForEachTile);
newWrapper.appendChild(eachTile);
})
// newWrapper logs out correct info
console.log('newWrapper: ', newWrapper);
$(wrapper).html(newWrapper);
// ^^ html is assigned correctly, inspect-element shows
// correct results in place, but no results on screen.
}
})
}
populateCarousel();回答 1
Stack Overflow用户
发布于 2017-08-28 10:07:13
我通常更喜欢在标题中设置所有css文件，如下所示：
<head>
<meta charset="UTF-8">
<title>[A USEFULL TITLE]</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/font-awesome-4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="assets/css/screen.css">
我总是把我所有的JS文件像这样放在身体下面：
</body>
<script src="assets/js/jquery-3.2.0.min.js"></script>
<script src="assets/moment/moment.js"></script>
<script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="assets/js/script.js"></script>
<script src="assets/js/sriptForLocalGraphs.js"></script>
</html>我这样做是为了确保当文档准备好时，他会执行代码：
var init = function () {
DoSomeFunctions();
};
$(document).ready(init());我还喜欢的是一次在HTML中添加一个字符串，而不是每次都添加一个片段：
例如，就像这样：
var createAForm = function(SomeHandyData){
var $resultaatString = "";
$.each(SomeHandyData, function (index, item) {
$resultaatString + = <img id='localImage' class='media-object' src='assets/media/" + longName + ".png' alt='" + longName + "' title='" + longName + "'>
});
$("#InAELEMENTDIV").html($resultaatString);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45916314
复制相关文章
相似问题
腾讯云开发者
