Question

我们正在运行一个群组博客，其中包含许多具有不同经验水平的用户。一个不断的恼怒是用户打破头版的图像。我们的解决方案是搜索包含图片的摘录，隐藏.entry-summary div并从中删除img标记，并构建一个使用.entry-image的新src div img的属性构造一个垂直和水平居中的CSS背景图像。

它开始完美运行，但随着网站中添加了更多功能，例如搜索和相关的帖子建议，我们开始注意到too much recursion（来自缩小的jquery 1.4.2的第50行）错误，然后打破网站。我添加了我认为相关的模式（来自"too much recursion" error in JQuery 1.3.2），但它仍然会发生。（最重要的是，我从第55行看到e is null。）

以下是相关代码。我也使用event.special.load插件，这可能会引起头痛。

$('[id*=card] .entry-summary img').load(function() {
  var card = $(this).parents('[id^=card]');
  var url = $(this).attr('src');
  var dynHeight = 300 - $(card).find('.entry-title').outerHeight(true) - $(card).find('.entry-meta').outerHeight(true);

  $(card)
    .append("<div class='entry-image'></div>") // we need a new div to hold our image
    .find('.entry-image')
    .hide()
    .css({
      'background' : 'url(' + url + ') no-repeat center center',
        'background-size' : '100% auto',
        '-moz-background-size' : '100% auto',
        '-webkit-background-size': '100% auto',
        'width' : '200px',
        'height' : dynHeight  + 'px',
        'margin' : '0px',
        'padding' : '0px',
    });

  $(card).find('.entry-summary').hide();
  $(card).find('.entry-image').show();

  $(card).find('.entry-summary img').remove(); 
});

$(function() {
  $('[id*=card] .entry-image').parent().mouseenter( function(event) {
    event.stopPropagation();
    $(this).find('.entry-image').hide();
    $(this).find('.entry-summary').show();   
  }).mouseleave(function(event) {    
    event.stopPropagation();
    $(this).find('.entry-summary').hide();
    $(this).find('.entry-image').show();
  });
});

$(function() {
  $('[id*=card] .entry-summary').click(function(event) {
    event.stopPropagation();
    var postUrl = $(this).siblings('.entry-title').find('a').attr('href');
    window.location = postUrl;
  });
});

Answer 1

我不是100％肯定你所描述的问题，但我确实看到你的代码中可能有一些极端低效的问题。您继续一遍又一遍地重新查询相同的内容，而不是一次查询并存储它，然后对该存储对象进行操作。我想知道这种不断的重新查询是否会导致递归......

试试这个：

$( '[id*=card] .entry-summary img' ).load( function()
{
    var $this, card, url, dynHeight;

    $this = $( this );
    card = $this.parents( '[id^=card]' );
    url = $this.attr( 'src' );
    dynHeight = 300 - card.find( '.entry-title' ).outerHeight( true ) - card.find( '.entry-meta' ).outerHeight( true );

    card
        .append( '<div class="entry-image"></div>' ) // we need a new div to hold our image
        .find( '.entry-image' )
            .hide()
            .css( {
                "background" : 'url( "' + url + ' ") no-repeat center center',
                "background-size" : '100% auto',
                "-moz-background-size" : '100% auto',
                "-webkit-background-size": '100% auto',
                "width" : '200px',
                "height" : dynHeight  + 'px',
                "margin" : '0px',
                "padding" : '0px',
            } ).
            .show();

    card.find( '.entry-summary' ).hide();
    $this.remove();
} );

$( function()
{
    $( '[id*=card] .entry-image' )
        .parent()
            .mouseenter( function( event )
            {
                var $this = $( this );
                event.stopPropagation();

                $this
                    .find( '.entry-image' )
                        .hide()
                        .end()
                    .find('.entry-summary')
                        .show();   
            } )
            .mouseleave( function( event )
            {
                var $this = $( this );
                event.stopPropagation();
                $this
                    .find( '.entry-summary' )
                        .hide()
                        .end()
                    .find( '.entry-image' )
                        .show();
            } );
} );

$( function()
{
  $( '[id*=card] .entry-summary' )
    .click( function( event )
    {
        event.stopPropagation();
        window.location = $( this )
            .siblings( '.entry-title' )
                .find( 'a' )
                    .attr( 'href' );
  } );
} );

“图像放置过多递归” - jquery 1.4.2

1 个答案: