为什么这个计算差异？ JQuery的

Question

我有这个网站：

link

在document.ready计算或resize function

中调用函数时会有所不同

页面加载计算不正确时有白色边框...

$( document ).ready(function() {
    var windowsize = $(window).outerWidth();   
    var stanga= jQuery('#secondary').outerWidth();
    console.log('stanga:',stanga);
    var dreapta= jQuery('.right').outerWidth();
    console.log('dreapta:',dreapta);
    var contentwh=windowsize-stanga-dreapta;
    console.log('total:',contentwh);
    $('.navbar-fixed-top').css('width',contentwh);
    $('#main-content').css('width',contentwh);
    $('.continut').css('width',contentwh);

    $(window).on('resize',function(){
        var windowsize = $(window).outerWidth();   
        var stanga= jQuery('#secondary').outerWidth();
        console.log('stanga-resize:',stanga);
        var dreapta= jQuery('.right').outerWidth();
        console.log('dreapta-resize:',dreapta);
        var contentwh=windowsize-stanga-dreapta;
        console.log('total-resize:',contentwh);
        $('.navbar-fixed-top').css('width',contentwh);
        $('#main-content').css('width',contentwh);
        $('.continut').css('width',contentwh);
    }
});

基本上我使用了相同的代码和document.ready，但也根据调整大小，不幸的是。

我在1366像素上做了手动计算，应该得到669像素的宽度（好的值），我是657像素的网站。

有谁知道为什么这个差异出现在12px？

提前致谢！

Answer 1

-edit

问题在于.right节点max-width属性禁用此功能会导致页面正确加载维度但是在文档就绪时，节点大小调整的算法无法正确运行。 重新调整页面大小后，页面会正确加载。

我对下一个问题的最佳猜测是OP没有提供足够的代码来完全诊断他的问题;但是，我很肯定准备好的代码没有正确执行。 在控制台中运行每个变量并编辑您的问题以提供答案。

上传值：

window: 1903
custom2.js:89 
stanga: 260
custom2.js:91 
dreapta: 609
custom2.js:93 
total: 1034

调整大小后：

window: 1918
custom2.js:156 
stanga-resize: 260
custom2.js:158 
dreapta-resize: 614
custom2.js:160 
total-resize: 1044
custom2.js:154 
window: 1920
custom2.js:156 
stanga-resize: 260
custom2.js:158 
dreapta-resize: 614
custom2.js:160 
total-resize: 1046

您的resize事件被触发两次，这是一个问题，但最终会解析正确的值。

Answer 2

你必须使用Windows作为操作系统吗？

问题是在加载时，你有一个滚动条。所以当你进行calculs时，某些元素的宽度会更小。之后，滚动条消失并出现白色间隙。

快速修复将在身体上添加overflow:hidden然后进行计算。之后，您可以删除隐藏的溢出。

请注意，当您将窗口调整到一定高度以下时，也会出现此问题。

Answer 3

您可能需要加载背景图像asynchronus，在加载完成后捕获事件，然后进行计算。像这样：

$(document).ready(function() {
  asyncLoad('.yourElement');
});

$(window).resize(function() {
  doCalculations('.yourElement');
});

var asyncLoad = function(elem) {
  var imgCSS = elem.css('background-image');
  var imgSrc = imgCSS.replace('url(', '').replace(')', '');
  $('<img/>').attr('src', imgSrc).load(function() {
    $(this).remove();
    elem.css('background-image', imgCSS);
    doCalculations(elem);
  });
});

var doCalculations = function(elem) {
  var windowsize = $(window).outerWidth();   
  var stanga = jQuery('#secondary').outerWidth();
  var dreapta = jQuery('.right').outerWidth();
  var contentwh = windowsize-stanga-dreapta;
  $('.navbar-fixed-top').css('width',contentwh);
  $('#main-content').css('width',contentwh);
  $('.continut').css('width',contentwh);
}

您可能需要更改函数以捕获图像数组并在最后一次加载时执行某些操作，但我希望“＃Async loading＆＃39;很好地解释了。

如解释HERE，该函数加载图像，然后它使用与元素相同的图像作为背景图像，浏览器足够智能，无法加载该图像两次。