使用移动浏览器时,笨拙且缓慢的jQuery动画

时间:2017-11-12 03:43:52

标签: jquery

您好我正在开发一个使用.animate()和.slideToggle()的网站,一切都在桌面浏览器中正常工作,但当时我在Chrome或Opera中测试它为Android动画变得笨重而缓慢,我首先在那里是一些性能问题,但后来我尝试了Firefox for android,并意识到它工作得很快,很棒。

你能给我任何线索,可以让我解决这个问题吗? 我很感激能帮助我的任何事情。

这是我的代码:

$("#respuestas, .responder").on("input", "textarea", function () {
  let inp = $(this);
   if(inp.val().length>1){
     inp.next(".form-section").find(".btn").removeClass("disabled");
   } else {
     inp.next(".form-section").find(".btn").addClass("disabled");
   }
 });

 $(".responder").on("click", ".res:not(.disabled)", function (evt) {
   evt.preventDefault();
   let elm = $(this).attr("id").split("-");
   let id = <?=$id?>;
   let txtArea=$("#contenido-" + id);
   let data = txtArea.serializeArray();
   data.push({name: "qid", value: id});
   $.ajax({
     method: "post",
     url: "../c/cqa.php",
     data: data,
     dataType: "json"
   }).done(function (response) {
     $.each(response, function (k, v){
       if (k==="status") {
         if (v==="ok") {
           txtArea.val("");
           $(".responder-" + id).click();
           let answerId = generateId();
           let seccionRespuestas = $("#respuestas");
           //respuestaDOM adds a div to the page
           respuestaDOM(response['name'], response['img'], response['url'], response['contenido'], seccionRespuestas , answerId);
           let answer = seccionRespuestas.find("#answer-" + answerId); 
           $("html, body").animate({
             'scrollTop': (answer.offset().top - 228)
           }, 500);
         }else{
           alert("Error."); //temporal alert
         }
       }
     });
   });
 });

感谢您抽出时间

1 个答案:

答案 0 :(得分:0)

嘿伙计们我刚刚在另一篇文章中尝试了我的代码,我发现它在我测试的所有Android浏览器中都很快,问题实际上是页面的大小,因为我加载了150多条记录,页面开始变慢并且变得笨重。

解决方案是在加载记录时创建一个分页系统,对不起有误解的人

PD:我学到的东西是firefox处理的“大”网站