页面上的单个图像会显著减慢所有 jquery 事件的速度

Single image on page slows down all jquery events significantly

本文关键字：jquery 事件 速度 单个 图像      更新时间：2023-09-26

我有一个文件上传表单，旁边有一个数据表单。在常规数据表单中，如果在选择中进行某些选择，则 jquery 会加载其他输入字段。但是，如果用户上传文件，则会大大减慢数据表单的速度。大约 200 KB 的图像会使所有 jquery 变慢。为什么图像会影响我的 jquery？

我在我的所有操作前面使用 $（文档），例如 

$(document).on('mouseover','input[type=button], input[type=submit], a, option',function() {
    $(this).css({'background-position':'100%'});
});

这是问题所在吗？如果没有，我该怎么做才能解决这个问题。谢谢

代码速度慢

function DATA_LOAD(TYPE, VALUE) {
TYPE_WIDTH  = $('#'+TYPE).width();
TYPE_HEIGHT = $('#'+TYPE).height();
$('#'+TYPE+'_PROGRESS_END').fadeOut(250);
$('#'+TYPE+'_PROGRESS').css({'background-image':'url(/DISPLAY/load2-2.gif)'}).fadeIn(250);
$('#'+TYPE).css({'min-height': TYPE_HEIGHT,'background':'#000 url(/DISPLAY/load1-1.gif) repeat'});
$('#'+TYPE+'_LOAD').animate({'opacity':'0'}, 250, function() {
    $('#'+TYPE+'_LOAD').load('/LOAD/data.php',{TYPE: TYPE, TYPE_WIDTH: TYPE_WIDTH, VALUE: VALUE}, function() {                                      
        TYPE_HEIGHT = $('#'+TYPE+'_LOAD').show().height();
        $('#'+TYPE+'_LOAD').hide();
        $('#'+TYPE).animate({'min-height': TYPE_HEIGHT}, 250,function() {
            $('#'+TYPE+'_LOAD').css({'display':'block'}); 
            $('#'+TYPE+'_PROGRESS').fadeOut(250);
            $('#'+TYPE+'_LOAD').animate({'opacity':'1'}, 250, function() {
                $('#'+TYPE).css({'background':''}); 
}); }); }); }); }

我测试了什么

  1. 我在浏览器中检查了我的代码，并取消选中了所有显示的背景图像，代码运行完美！但是对于图像，jquery很慢。它的超级滞后和紧张。显示的图像大小直接影响我的jquery的流畅度。为什么？

  2. 除了上面的代码之外，我还删除了所有jquery，它没有任何影响。它仍然很慢。

我发现了问题。这是我的布局格式。

<table>
<tr>
<td>IMAGES</td>
<td>FORM WITH JQUERY ACTIONS</td>
</tr>
</table>

为什么带有表格的布局会搞砸我的 jquery 动作？

溶液

删除表格和使用的浮动元素

相关文章：