我正在构建一个使用一些外部js文件的网站.我通过下面的代码加载文件,但如果一个或多个文件下载失败,我不知道如何继续.我应该继续请求他们直到所有人下载吗？为每个文件执行单独的onload事件会更好吗？我怎么知道哪个文件加载失败并需要再次请求？
var filesToLoad = ["https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"];
var loader = new ScriptLoader();
filesToLoad.forEach(function(file) {
loader.add(file);
});
loader.loaded(function(failedCallbackF) {
console.log("Error.");
//Try getting the files again??
});
function ScriptLoader() {
var promises = [];
this.add = function(url) {
var promise = new Promise(function(resolve, reject) {
var script = document.createElement('script');
script.src = url;
script.addEventListener('load', function() {
resolve(script);
}, false);
script.addEventListener('error', function() {
reject(script);
console.log('was rej');
}, false);
document.body.appendChild(script);
});
promises.push(promise);
};
this.loaded = function(callbackOnFailed) {
Promise.all(promises).then(function(result1) {
console.log('Script loaded from:', result1);
}, callbackOnFailed);
};
}
我尝试使用flexbox方法,表格方法和其他一些方法垂直居中一个未知高度的div,但我的div没有正确居中.我希望居中div的宽度为窗口宽度的50%或最小宽度为200px.
.content {
background-color: violet;
min-width: 200px;
width: 50%;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 1px 7px 1px rgba(0, 0, 0, 1);
}
.outer-container {
display: table;
width: 100%;
background-color: violet;
}
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
}<body>
<div class="outer-container">
<div class="container">
<div class="content">
<div class="title-class">
Hello there
</div>
</div>
</div>
</div>
</body>