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();
        }
    });

允许我将鼠标悬停在作品上并显示所显示作品的name和caption。

如果ajax调用附加了20或更少的作品，这可以正常工作。但是当我有超过20件作品时，当你将鼠标悬停在作品上时会有明显的滞后感，其中显示name和caption的过渡仅在悬停后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（mouseenter）我应该使用.on但是它没有解决问题。任何其他建议将不胜感激

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

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();
    }
});

查看相关标记非常有用

当我有很多动态生成的div标签时，$ .on（“mouseenter”）落后于我的网站

1 个答案: