[英]force safari to repaint DOM
Apparently, Safari does not repaint the DOM during the submit event. 显然,Safari在提交事件期间不会重新绘制DOM。 I have code that contains an ajax function inside the submit handler.
我的代码在提交处理程序中包含ajax函数。 I cannot change the action of the form or the submit button to
<button>
. 我无法将表单或提交按钮的操作更改为
<button>
。 Inside the ajax function I am calculating the width of a progress bar and adjusting a div accordingly. 在ajax函数内部,我正在计算进度条的宽度并相应地调整div。 This works in Chrome and FF.
这适用于Chrome和FF。 Not in Safari.
不在Safari中。 When I stop the browser, the progress bar shows.
当我停止浏览器时,将显示进度栏。
I want to know how to force Safari to repaint the DOM inside my ajax function. 我想知道如何强制Safari重新绘制ajax函数中的DOM。 It looks like this:
看起来像这样:
$('#webfileuploadform').bind('submit',function(){
var $progress = $('<div id="upload-progress" class="upload-progress"></div>').appendTo($('#webfileuploadform')).append('<div class="progress-container"><div class="progress-info">uploading 0%</div><div class="progress-bar"></div></div>');
function update_progress_bar(){
$.ajax({
dataType:"json",
async: false,
url: progress_url,
success: function(data){
$progress.show(); // This shows the progress bar. I imagine
// this is where I would want to re-paint the DOM
if(data.status == "uploading"){
var total_progress = parseInt(data.uploaded) / parseInt(data.length);
var width = $progress.find('.progress-container').width();
var progress_width = Math.round(width * total_progress);
var progress_px = progress_width + 'px';
$progress.find('.progress-bar').animate({'width':progress_px});
$progress.find('.progress-info').text('uploading ' + parseInt(total_progress*100) + '%');
} else if (data.status == "not-found") {
$progress.find('.progress-bar').animate({'width':'100%'});
$progress.find('.progress-info').text('uploading 100%');
stop = 'Flag for end-of-file';
} else {
//console.log('Ajax Error');
}
},
error: function(textStatus){
console.log("ERROR: " + textStatus);
}
});
// Check flag to see if user stopped the page to cancel the ajax requests
if(typeof stop == 'undefined'){
// Iterates the ajax requests
setTimeout(function(){update_progress_bar()}, freq);
} else {
setTimeout(function(){
$progress.animate({opacity:0.5},1000);
},freq);
$progress.find('.progress-info').text('Refresh the page to continue.');
}
}
// Initiate the ajax requests
setTimeout(function(){update_progress_bar()}, freq);
});
I would recommend using forceDOMReflowJS . 我建议使用forceDOMReflowJS 。 In your case, your code would look as follows.
在您的情况下,您的代码将如下所示。 Also, your code doesn't exactly work as I believe it is intended so I fixed your code up too.
另外,您的代码不能完全按照我的预期工作,因此我也修复了您的代码。
$('#webfileuploadform').bind('submit',function(){
var $progress = $('<div id="upload-progress" class="upload-progress"></div>');
// I believe you forgot to separate your attachments section of the code from
// the variable declaration
$progress.appendTo($('#webfileuploadform')).append('<div class="progress-container"><div class="progress-info">uploading 0%</div><div class="progress-bar"></div></div>');
function update_progress_bar(){
$.ajax({
dataType:"json",
async: false,
url: progress_url,
success: function(data){
$progress.show();
////////////////////////////////////////////////////////////////////////////////
// Perform the reflow (even though I don't really see how it would change things)
forceReflowJS( $progress[0] );
////////////////////////////////////////////////////////////////////////////////
if(data.status == "uploading"){
var total_progress = parseInt(data.uploaded) / parseInt(data.length);
var width = $progress.find('.progress-container').width();
var progress_width = Math.round(width * total_progress);
var progress_px = progress_width + 'px';
$progress.find('.progress-bar').animate({'width':progress_px});
$progress.find('.progress-info').text('uploading ' + parseInt(total_progress*100) + '%');
} else if (data.status == "not-found") {
$progress.find('.progress-bar').animate({'width':'100%'});
$progress.find('.progress-info').text('uploading 100%');
stop = 'Flag for end-of-file';
} else {
//console.log('Ajax Error');
}
},
error: function(textStatus){
console.log("ERROR: " + textStatus);
}
});
// Check flag to see if user stopped the page to cancel the ajax requests
if(typeof stop == 'undefined'){
// Iterates the ajax requests
setTimeout(function(){update_progress_bar()}, freq);
} else {
setTimeout(function(){
$progress.animate({opacity:0.5},1000);
},freq);
$progress.find('.progress-info').text('Refresh the page to continue.');
}
}
// Initiate the ajax requests
setTimeout(function(){update_progress_bar()}, freq);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.