使用jQuery添加元素时,Google Chrome上的多重渲染问题

时间:2015-02-10 18:54:40

标签: javascript jquery html css google-chrome

我在Chrome中看到一个问题,当使用jQuery删除页面并向页面添加元素时,元素会呈现两次。它们被正确渲染,然后再次渲染在它们自身的上方,但稍微偏移。

之后,当您调整窗口大小时,问题会消失,或者有时在某些窗口大小时根本不显示。

这似乎是Windows和Mac中最近一个Chrome版本中出现的错误。在Firefox,Safari for Mac或Win7上的IE10中都不会发生。

阻止这种情况发生的正确方法是什么?我的javascript有问题吗?

当使用左侧链接切换位置时,​​会发生在下一页:

http://affordableattic.com/locations/#donna

截图:

Screenshot of multiple rendering issue in Chrome

这是jQuery,我在页面上替换了有问题的元素:

if(locationPhoto.indexOf("crystal/default.png") < 0){
  currentItem = '<div class="streetview"><img src="' + locationPhoto + '" alt="' + locationAlt + '" class="alignnone size-large wp-image-605"></div>';
}

if(mgrPhoto.indexOf("crystal/default.png") < 0 && mgrPhoto != "false"){
  currentItem += '<div class="storemanager"><img src="' + mgrPhoto + '" alt="' + mgrAlt + '" class="alignnone size-full wp-image-592" />';
  currentItem += '<span class="caption"><!--googleoff: all-->' + mgrCaption + '<!--googleon: all--></span></div>';
}

if(tabletLinks || mobile){
  address = '<a href="' + mapLink + '">' + address + '</a>';
}
if(mobile){
  phone = '<a href="tel:1-' + phone + '">' + phone + '</a>';
}

currentItem += '<div class="clear"></div><h2>' + title + '</h2><div class="contact">';
currentItem += '<p><i class="icon-map-marker icon-2x pull-left"></i>' + address + '</p>';
currentItem += '<p><i class="icon-phone icon-large pull-left"></i> ' + phone + '</p>';
if(truckRental != ''){ currentItem += '<p><i class="icon-phone icon-large pull-left"></i> ' + truckRental + '</p>'; }
currentItem += '<p><i class="icon-envelope-alt pull-left"></i>  <a href="mailto:' + email + '?Subject=' + emailSubject + '">' + email + '</a></p>';
currentItem += '<div class="buttons">';
currentItem += locationText;
currentItem += '</div>';
currentItem += '<div class="clear"></div></div>';

iconTime = '<p><i class="icon-time icon-large pull-left"></i>';

currentItem += '<div class="hours">';
currentItem += iconTime + mon + '</p>';
currentItem += iconTime + tues + '</p>';
currentItem += iconTime + wed + '</p>';
currentItem += iconTime + thu + '</p>';
currentItem += iconTime + fri + '</p>';
currentItem += iconTime + sat + '</p>';
if(sunD != "" ){ currentItem += iconTime + sunD + '</p>'; }
currentItem += '</div>';

currentItem += '<div class="buttons standalone">';
currentItem += locationText;
currentItem += '</div>';

container.fadeOut('slow', function()
{
  container.hide().empty().html(currentItem).fadeIn('slow');
});

如果您想查看完整的脚本,请告诉我。还有其他一些事情正在发生,比如地图和哈希变换。

0 个答案:

没有答案