Question

我有一个相当广泛的标题和定义列表，我应用了显示/隐藏效果。我假设从大量的文本和项目，这种情况发生的速度几乎是痛苦的。我最初使用的是其他来源的代码，所以这不是我的工作。我知道触发效果的“阅读更多”链接设置为在页面加载后进入...这可能是我的问题的另一个原因。我不完全确定它需要以这种方式构建，但我在这里是一个新手，只能依靠逻辑来解决我当前的故障排除方法。

THE SCRIPT

$(function(){
    var slideHeight = 36; // px
     $('.jswrap').each(function(){
        var defHeight = $(this).height();
        if(defHeight >= slideHeight){
            $(this).css({'height':slideHeight,'max-height': defHeight});
            $(this).after($('<div class="jsreadmore"><a href="#">Read More</a></div>'));
        }

        $('.jsreadmore a').click(function(){
            var $targetSlide = $(this).parent().prev(),
                curHeight = $targetSlide.height(),
                defHeight = $targetSlide.css('max-height');
            if(curHeight == slideHeight){
                $targetSlide.animate({
                  height: defHeight
                }, "normal");
                $targetSlide.next().children('a').html('Close');
            }else{
                $targetSlide.animate({
                  height: slideHeight
                }, "normal");
                $targetSlide.next().children('a').html('Read More');
            }
            return false;
        });
    });
 });

HTML

 <div class="jscontainer">
    <h4>Other Procedures</h4>
        <div class="jswrap">
        <p>content</p>
            <p>more content</p>
            <p>more content</p>
    </div></div>

`

CSS

.content_sub1 .jscontainer {margin:0 auto;}
.content_sub1 .jscontainer h2 {font-size:20px;color:#0087f1;}
.content_sub1 .jswrap {position:relative; padding:10px; overflow:hidden;}
.content_sub1 .jsgradient {width:100%;height:35px; position:absolute; bottom:0; left:0;}
.content_sub1 .jsreadmore {padding:5px; color:#333; text-align:right;}
.content_sub1 .jsreadmore a {padding-right:22px; font-weight:bold; font-size:12px; text-transform: uppercase; color:#c44;  font-family:arial, sans-serif;}
.content_sub1 .jsreadmore a:hover {color:#000;}

链接到页面

http://www.doctorhtiller.com/procedures.html

Answer 1

当DOM中有大量项目时，任何浏览器都会过载。我知道最简单的方法是不要将它们全部加载到DOM中，只在ajax中加载它们。您也可以在向下滚动页面时动态加载它们。完成后，您也可以从DOM中删除项目，但有些浏览器不太擅长将它们从内存中删除，并且可能会继续使浏览器陷入困境。

Answer 2

将事件处理程序绑定在jQuery的每个循环之外，否则你将把相同的事件监听器绑定到DOM中当前可用的所有“read more”元素，直到循环结束。

像这样：

$(function(){
    var slideHeight = 36;

    $('.jswrap').each(function(){
        var defHeight = $(this).height();

        if(defHeight >= slideHeight){
            $(this).css({'height':slideHeight,'max-height': defHeight});
            $(this).after($('<div class="jsreadmore"><a href="#">Read More</a></div>'));
        }
    });

    $('.jsreadmore a').click(function(){
        var $targetSlide = $(this).parent().prev(),
            curHeight = $targetSlide.height(),
            defHeight = $targetSlide.css('max-height');

        if(curHeight == slideHeight){
            $targetSlide.animate({
                height: defHeight
            }, "normal");
            $targetSlide.next().children('a').html('Close');
        }else{
            $targetSlide.animate({
                height: slideHeight
            }, "normal");
            $targetSlide.next().children('a').html('Read More');
        }
        return false;
    });
});

Answer 3

你可以更进一步，把它变成代表：

$('.jsreadmore').delegate('a', 'click', function(){
    var $targetSlide = $(this).parent().prev(),
        curHeight = $targetSlide.height(),
        defHeight = $targetSlide.css('max-height');

    if(curHeight == slideHeight){
        $targetSlide.animate({
            height: defHeight
        }, "normal");
        $targetSlide.next().children('a').html('Close');
    }else{
        $targetSlide.animate({
            height: slideHeight
        }, "normal");
        $targetSlide.next().children('a').html('Read More');
    }
    return false;
});

这给你带来的是你真的有一个事件处理程序处理所有的事情，你应该动态创建更多的代理人已经处理它们而不像点击处理程序。

性能问题显示/隐藏多个div

3 个答案: