float元素获取宽度

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="/common-js/jquery-1.9.1.js"></script>
    <style>
        .scroll-list li {float:left;}
    </style>
    <script>
        $(document).ready(function(){
           var imgs = $("#scroll_list").find("img");
            imgs.each(function(){
                console.log($(this).width());
            })
        });
    </script>
</head>
<body>
<div class="scroll-warp" id="scrollWrap">
    <div class="scroll-box" id="scroll_box">

        <div class="scroll-list left" id="scroll_list">
            <ul>
                <li><img src="/images/a.jpg" alt="1"></li>
                <li><img src="/images/b.jpg" alt="2"></li>
                <li><img src="/images/c.jpg" alt="3"></li>
                <li><img src="/images/e.jpg" alt="4"></li>
                <li><img src="/images/f.jpg" alt="5"></li>
            </ul>
        </div>

    </div>
</div>

</body>
</html>

在页面初次加载时能正确获得图片的宽度,在chrome中使用右键的[重新加载],在firefox和chrome中使用vim插件的强制刷新都会出现width值错误的现象.请问原因是什么.

看样子你是想写个图片轮播获取图片的高度。

$(document).ready 是指普通dom元素都可用才执行但是img不是，img的宽高还未加载出来。
解决办法一 var img = new Image() img = '你图片的路径' img.onload = function(){
在这个回调里图片宽高都已经加载好可用了}
解决办法二你提前已经定了轮播图片的高度
如果你想做可自适应的请在每次滑动的时候重新获取滑动距离

【热门文章】