第一次加载时jquery calcutate宽度问题

第一次加载页面时，图像出现累积增加.Jquery不是动态计算宽度，而是正常出现第二次加载或页面刷新后。可能是什么原因？第一次加载时jquery calcutate宽度问题

的Javascript：

$(function(){ 
    var imageWidth, totalWidth, sliderContent, $slider; 
    $slider = $("#slider"); 
    sliderContent = $slider.html(); 
    $slider.html("<div id=\"slideWrapper\">" + sliderContent + "</div>"); 
    imageWidth = $slider.find("img").width(); 
    totalWidth = $slider.find("img").size() * imageWidth; 
    $("#slider").css("width", imageWidth); 
    $("#slideWrapper").css("width", totalWidth); 

    $(".next-arr").click(function() { 
     if (parseInt($("#slideWrapper").css("margin-left")) < 0 && !$("#slideWrapper").is(":animated")) { 
      $("#slideWrapper").stop(true, true).animate({ marginLeft: "+=" + imageWidth + "px" }, 1600); 
     } 
    }); 

    $(".prev-arr").click(function() { 
     if ((parseInt($("#slideWrapper").css("margin-left")) * -1) < (totalWidth - imageWidth) && !$("#slideWrapper").is(":animated")) { 
      $("#slideWrapper").stop(true, true).animate({ marginLeft: "-=" + imageWidth + "px" }, 1600); 
     } 
    }); 
});

HTML：

<div id="slider"> 
    <a href="#" title="img"> 
     <img src="img.jpg" alt="img" /></a> 
    <a href="#" title="img"> 
     <img src="img.jpg" alt="img" /></a> 
    <a href="#" title="img"> 
     <img src="img.jpg" alt="img" /></a> 
    <a href="#" title="img"> 
     <img src="img.jpg" alt="img" /></a> 
</div>

的CSS：

#slider { 
    overflow: hidden; 
} 

    #slider a, #slider img { 
     float: left; 
     overflow: auto; 
     position: relative; 
    } 

    #slideWrapper { 
     overflow: hidden; 
    } 

     #slideWrapper img { 
      float: left; 
     }

来源

2013-04-22 user2282567

可以使用$(window).load其他的方式，可能是你的函数图像的负载之前执行，因此对第二次图像从缓存中出现，所以他们不会花时间在第一次oad图像不从缓存中显示。

$(window).load(function(){ 
var imageWidth, totalWidth, sliderContent, $slider; 
$slider = $("#slider"); 
sliderContent = $slider.html(); 
$slider.html("<div id=\"slideWrapper\">" + sliderContent + "</div>"); 
imageWidth = $slider.find("img").width(); 
totalWidth = $slider.find("img").size() * imageWidth; 
$("#slider").css("width", imageWidth); 
$("#slideWrapper").css("width", totalWidth); 
// other code ..... 
});

希望这是有道理的

来源

2013-04-22 05:23:40

感谢您response.But $（窗口）.load（）函数非常缓慢。问题继续。 – user2282567 2013-04-22 05:28:05

我已经明确提到第一次加载你的图像将加载为新鲜的图像，然后浏览器缓存它，因此第二次，他们将从缓存中取出并加载快速 – 2013-04-22 05:31:09

我遇到这个问题，当我用Chrome和Safari打开HTML – user2282567 2013-04-22 05:35:17

第一次加载时jquery calcutate宽度问题

回答

相关问题