每隔一段时间,Chrome都会错误地呈现完全有效的HTML/CSS或根本不呈现.通过DOM检查器深入挖掘通常足以让它实现其方式的错误并正确地重绘,因此可以证明标记是好的.这种情况在我正在进行的项目中经常(并且可预测地)发生,因为我已经将代码放在适当位置以在某些情况下强制重绘.
这适用于大多数浏览器/操作系统组合:
el.style.cssText += ';-webkit-transform:rotateZ(0deg)'
el.offsetHeight
el.style.cssText += ';-webkit-transform:none'
如在,调整一些未使用的CSS属性,然后询问一些强制重绘的信息,然后取消对该属性的破坏.不幸的是,Chrome for Mac背后的聪明团队似乎找到了一种方法来获得offsetHeight而无需重绘.从而杀死了一个有用的黑客.
到目前为止,我想出的最好的方法是在Chrome/Mac上获得同样的效果:
$(el).css("border", "solid 1px transparent");
setTimeout(function()
{
$(el).css("border", "solid 0px transparent");
}, 1000);
实际上,强制元素跳跃一点,然后冷却一秒钟然后再跳回来.更糟糕的是,如果你将超时时间降低到500毫秒以下(不太明显),它通常不会产生预期的效果,因为浏览器在返回其原始状态之前不会重新绘制.
有人愿意提供适用于Chrome/Mac的重绘/刷新黑客(最好是基于上面的第一个例子)的更好版本吗？
情况就是这样.我有一些看起来像这样的JavaScript:
function onSubmit() {
doSomeStuff();
someSpan.style.display="block";
otherSpan.style.display="none";
return doLongRunningOperation;
}
当我将其作为表单提交操作并从非IE浏览器运行时,它会快速交换两个跨度可见性并运行长时间的javascript操作.如果我在IE中执行此操作,则直到onSubmit()完全返回后才会执行交换.
我可以通过粘贴一个警告框来强制重绘:
function onSubmit() {
doSomeStuff();
someSpan.style.display="block";
otherSpan.style.display="none";
alert("refresh forced");
return doLongRunningOperation;
}
此外,明显的jquery重构不会影响IE行为:
function onSubmit() {
doSomeStuff();
$("#someSpan").show();
$("#otherSpan").hide();
return doLongRunningOperation;
}
IE8和IE6上存在此行为.反正是否强制在这些浏览器中重绘DOM？
我要做的是在执行CPU密集型脚本之前更新一个简单的div来说"Processing ..."(运行需要3-12秒,没有AJAX)然后更新div来说"完成! " 完成后.
我所看到的是div永远不会更新"Processing ...".如果我在该命令后立即设置断点,则div文本会更新,所以我知道语法是正确的.IE9,FF6,Chrome13中的行为相同.
即使绕过jQuery并使用基本的原始Javascript,我也看到同样的问题.
你认为这会有一个简单的答案.但是,由于jQuery .html()和.text()没有回调挂钩,因此不是一个选项.它也没有动画,所以没有.queue可以操纵.
你可以使用下面我准备的示例代码来测试这个,它显示了具有5秒高CPU功能的jQuery和Javascript实现.代码很容易理解.单击按钮或链接时,您永远不会看到"正在处理..."
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script>
<script type="text/javascript">
function addSecs(d, s) {return new Date(d.valueOf()+s*1000);}
function doRun() {
document.getElementById('msg').innerHTML = 'Processing JS...';
start = new Date();
end = addSecs(start,5);
do {start = new Date();} while (end-start > 0);
document.getElementById('msg').innerHTML = 'Finished JS';
}
$(function() {
$('button').click(function(){
$('div').text('Processing JQ...');
start = new Date();
end = addSecs(start,5);
do {start = new Date();} while (end-start > 0);
$('div').text('Finished JQ');
});
});
</script> …我遇到了一个问题。我有一个input元素和函数来显示“加载”动画。问题是，一旦我放下文件或单击并选择它们，“加载”动画就会显示几秒钟的延迟（多个文件或大文件）。
注意：使用 Angular 2+ 制作的解决方案这就是原因(change)
解决方案一：
HTML：
<input type="file" multiple="true" (change)="uploadImgs($event)"/>
JS：
uploadImgs(event: any) {
console.log('START UPLOAD!')
this.spinnerService.start();
///restOfTheLogic...}
解决方案2：使用onDrop事件触发this.spinnerService.start();显示动画
HTML：
<div (drop)="spinnerService.start();">
<input type="file" multiple="true (change)="uploadImgs($event)"/>
</div>
解决方案 3：触发这两个函数onChange/onDrop
HTML：
<input type="file" multiple="true (change)="spinnerService.start(); uploadImgs($event)"/>
输出：在所有情况下，放置文件后，我都可以console.log('START UPLOAD!')立即在控制台中看到输出，但在动画实际出现之前会出现延迟。
动画功能简单来说：
start() {
document.getElementById('loading').classList.remove('hidden');
}
我试着自己去寻找。但是堆叠为什么第一行console.log立即执行而第二行this.spinnerService.start();延迟执行？在操作 DOM 元素之前是否等待files读取数据或执行其他操作？
有什么想法可以避免这种延迟吗？
这是一个 HTML 页面，在左上角显示三个方形 div：
window.addEventListener('load', function () {
console.log('load event has fired')
window.scrollTo(500, 0);
// setTimeout(function() { window.scrollTo(500, 0); }, 0);
})body { height: 100vh }
.bigwidth {
width: 2000px;
display: block;
}
.square {
width: 100px;
height: 100px;
display: block;
position: absolute;
}
.greenish {
background-color: #75af99;
}
.redish {
background-color: #ff9b98;
}
.bluish {
background-color: #aabbff;
}
.whiteish {
background-color: #eaeaea;
}
* {
padding: 0;
margin: 0;
}<div class="whiteish bigwidth" style="height:100%;">
<div class="square greenish" style="left:50px; …我想知道如何用JS解决挂页.
我有一个JS循环,我正在测试这样,但它似乎永远挂起 - 有没有办法阻止它挂起,同时仍然完成脚本？:
<div id="my_data"></div>
<script>
function test(value){
output= [];
do{
value++;
output.push(value);
document.getElementById('my_data').innerHTML = (output.join(''));
}while(value < 10000000);
alert('end'); // never occurs
}
test(0);
</script>
javascript ×6
dom ×3
angularjs ×1
css ×1
dom-events ×1
high-load ×1
html ×1
jquery ×1
macos ×1
scroll ×1