javascript - $.on ("mouseenter") 当我有很多动态生成的 div 标签时滞后于我的网站

Question

我正在为我的学校做一个毕业网站。在每个选项卡上，我将 ajax 调用所有作品进行展示，作品展示后，我得到一个函数

    $(".viewport-computer .img_thumb_holder").on({
        mouseenter: function () {
            //stuff to do on mouse enter
            $(this).find(".caption").stop().fadeTo('slow', 1); 
        },
        mouseleave: function () {
            //stuff to do on mouse leave
            $(this).stop().fadeTo('slow', 1);  
            $(".caption").stop().fadeTo('slow', 0); 
            $(".viewport-computer .img_thumb_holder .img_thumb").stop().fadeTo(1, 1);  
            $(".viewport-computer .img_thumb").hide();
        }
    });

它允许我将鼠标悬停在作品上并显示所显示作品的名称和标题。

如果 ajax 调用附加 20 或更少的作品，这工作正常。但是当我有20多个作品时，鼠标悬停在作品上会有明显的卡顿感，转场显示name和caption只在like后显示悬停后 3 秒。我对如何解决最初使用的滞后问题感到非常压力

$(".viewport-computer .img_thumb_holder").hover(function(){
        //$(this).stop().fadeTo('slow', 0.4);  
        $(this).find(".caption").stop().fadeTo('slow', 1); 
    },function(){  
        $(this).stop().fadeTo('slow', 1);  
        $(".caption").stop().fadeTo('slow', 0); 
        $(".viewport-computer .img_thumb_holder .img_thumb").stop().fadeTo(1, 1);  
        $(".viewport-computer .img_thumb").hide();
    });

但在网上搜索我应该使用 .on 后我将其更改为 .on(mouseenter) 但它并没有解决问题。任何其他建议将不胜感激

更新 - 显示我如何显示它的编码

HTML:

            <div class="row">
                <!-- For mobile viewport -->
                <div class="viewport-mobile img_thumb_holder_div col-xs-12 hidden-lg">
                </div>

                <!-- For computer viewport -->
                <div class="viewport-computer img_thumb_holder_div col-lg-12 visible-lg no-padding ">

                </div>
             </div>

JS - 单击此选项卡后，将显示所有作品

            $(".tab_bm").click(function() {
                $(".container .popUp .author_pic_holder img").css("border-color", "#006a96");  
                $(".divider").css("background-image", "url(images/divider_it.png)"); 
                $(".infinite_header img").attr("src", "images/header_it.png");
                $(document.body).css("background-image", "url(images/BG/BlueBG.jpg)"); 
                $(".footer img").attr("src", "images/Footer_v1_1.jpg");
                //remove all div images first before adding images
                resetHome(); // this remove all the previously added displayed works
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "CMS/PHP/displayBmThumbs.php",
                    success: function(data) {
                        $(".viewport-computer .img_thumb_holder").remove();
                        $(".viewport-mobile .img_thumb_holder").remove();
                        $(".author_pic_holder").show();
                        $(".author_info_holder").show();
                        for(i=0; i<data.length; i++){
                            $(".viewport-computer.img_thumb_holder_div").append("<div class='col-lg-2 img_thumb_holder no-padding bioDisplay'><div class='featured'></div><img class='img_thumb'><h2 class='caption'>Author<br />Description</h2></div>");
                            $(".viewport-mobile.img_thumb_holder_div").append("<div class='col-xs-6 img_thumb_holder top-buffer bioDisplay'><img class='img_thumb'><h2 class='caption_mobile'>Author<br />Description</h2></div>");
                        }
                        idArray = [];
                        captionArray = [];
                        $('.viewport-computer .img_thumb_holder img').each(function(index, element) {
                            // Work out the data to set

                            // Now apply this to the elements
                            if (data[index]){
                                var imageUrl = data[index].links;
                                var captionHtml = "<span>" + toTitleCase(data[index].caption) + "<span class='spacer'></span><br/>"
                                $(element).attr("src", imageUrl);
                                if(checkIfCom == true){
                                    $(element).parent().css('background-image', 'url("'+imageUrl+'")');
                                }
                                $(element).next().html(captionHtml);
                                captionArray.push(toTitleCase(data[index].caption));
                                idArray.push(data[index].id);
                                homeLinksArray.push(data[index].links);
                                //homeTitleArray.push(toTitleCase(data[index].title));
                            }                       
                            $('.viewport-mobile .img_thumb_holder img').each(function(index, element) {
                                var imageUrl = homeLinksArray[index];
                                var captionHtml = captionArray[index];
                                $(element).attr("src", imageUrl); // i must find a way to solve this
                                $(element).next().html(captionHtml);

                            });
                            console.log("id: " + idArray);
                            console.log("caption: " + captionArray);
                            console.log("homeLinksArray: " + homeLinksArray );
                            hideDefault()
                            captionHover();
                            clickToAuthorPage();
                        });
                     }
                });
            }); 

最后

我当前的 mouseEnter/mouseLeave 函数

function captionHover() {       
    $(".viewport-computer .img_thumb_holder").on({
        mouseenter: function () {
            //stuff to do on mouse enter
            $(this).find(".caption").stop().fadeTo('slow', 1); 
        },
        mouseleave: function () {
            //stuff to do on mouse leave
            $(this).stop().fadeTo('slow', 1);  
            $(this).find(".caption").stop().fadeTo('slow', 0);
            //$(".caption").stop().fadeTo('slow', 0); 
            $(".viewport-computer .img_thumb_holder .img_thumb").stop().fadeTo(1, 1);  
            $(".viewport-computer .img_thumb").hide();
        }
    });
};

现在延迟不是那么糟糕，但您仍然可以注意到 0.5 的延迟，还有什么方法可以改进它以提高工作效率吗？

Answer 1

可以通过针对与实例隔离的元素来减少所有元素上的大量不必要的动画

在 mouseenter 中，您定位 .caption 的实例，但在 mouseleave 中，您定位页面中的所有实例

尝试

$(".viewport-computer .img_thumb_holder").on({
    mouseenter: function () {
        //stuff to do on mouse enter
        $(this).find(".caption").stop().fadeTo('slow', 1); 
    },
    mouseleave: function () {
        //stuff to do on mouse leave

        var $this = $(this).stop().fadeTo('slow', 1);
        $this.find(".caption").stop().fadeTo('slow', 0);
        /* not sure where these are , perhaps this can be optimized also*/
        $(".viewport-computer .img_thumb_holder .img_thumb").stop().fadeTo(1, 1);  
        $(".viewport-computer .img_thumb").hide();
    }
});

看到相关的标记会很有帮助