Jquery 尝试重新加载时显示图像长度为零_Jquery_Html

Jquery 尝试重新加载时显示图像长度为零

jquery html

Jquery 尝试重新加载时显示图像长度为零,jquery,html,Jquery,Html,我是初学者，我正在尝试显示图像的宽度。当我第一次加载时，它给出了正确的宽度，如果我重新加载，它显示的宽度为0。当我再次尝试使用chrome选项“空缓存和硬重新加载”加载时，它显示了正确的宽度。请揭开谜团，我无法理解 <html> <head> <style type="text/css"> #latest_albums{ overflow: hidden; margin: 1em 1em; background-color: #009999; }

我是初学者，我正在尝试显示图像的宽度。当我第一次加载时，它给出了正确的宽度，如果我重新加载，它显示的宽度为0。当我再次尝试使用chrome选项“空缓存和硬重新加载”加载时，它显示了正确的宽度。请揭开谜团，我无法理解

<html>
<head>
    <style type="text/css">
#latest_albums{

overflow: hidden;
margin: 1em 1em;
background-color: #009999;
}

.album li{
list-style-type: none;
float: left;
overflow: hidden;
margin: 2px 2px 0px 0px;
position: relative;


}

</style>

<script type="text/javascript" src="js/jquery-1.10.2.js"></script>

</head>
<body>
    <div id="latest_albums">

        <div class="album">
            <div class="set1">
            <li> <img src="albums/image1.jpg"> </li>
            <li> <img src="albums/image2.jpg"> </li>
            <li> <img src="albums/image3.jpg"> </li>
            <li> <img src="albums/image4.jpg"> </li>

            <li> <img src="albums/image5.jpg"> </li>
            <li> <img src="albums/image6.jpg"> </li>
</div>
<div class="set2">
            <li> <img src="albums/image1.jpg"> </li>
            <li> <img src="albums/image2.jpg"> </li>
            <li> <img src="albums/image3.jpg"> </li>
            <li> <img src="albums/image4.jpg"> </li>

            <li> <img src="albums/image5.jpg"> </li>
            <li> <img src="albums/image6.jpg"> </li>
</div>
        </div>

    </div>
    <script type="text/javascript">
var i=0,w = -150,SCROOL_WIDTH,WIN_WIDTH,IMG_MARGIN,IMG_WIDTH=10,TOT_ALBUMS,ALBUM_WIDTH;

IMG_WIDTH = $("div.album li").eq(0).width();

console.log(IMG_WIDTH);
</script>
</body>
</html>


#最新专辑{
溢出：隐藏；
利润率：1米1米；
背景色：#009999；
}
李先生{
列表样式类型：无；
浮动：左；
溢出：隐藏；
保证金：2PX2PX0PX0PX；
位置：相对位置；
}












VarI=0，w=-150，SCROOL\u宽度，WIN\u宽度，IMG\u边距，IMG\u宽度=10，TOT\u相册，相册宽度；
IMG_WIDTH=$（“div.album li”）.eq（0）.WIDTH（）；
控制台日志（IMG_宽度）；

谢谢，

ravi

您应该等到图像加载后再获取其宽度（否则它将返回0，因为它不知道它的大小）。试试这个：

$("div.album li:first img").load(function(){
    IMG_WIDTH = $("div.album li").eq(0).width();
    console.log(IMG_WIDTH);
});

试着这样做：

<script type="text/javascript">
  $(document).ready(function() {
   var i=0,w = -150,SCROOL_WIDTH,WIN_WIDTH,IMG_MARGIN,IMG_WIDTH=10,TOT_ALBUMS,ALBUM_WIDTH;

   IMG_WIDTH = $("div.album li").eq(0).width();

   console.log(IMG_WIDTH);
});
</script>


$（文档）.ready（函数（）{
VarI=0，w=-150，SCROOL\u宽度，WIN\u宽度，IMG\u边距，IMG\u宽度=10，TOT\u相册，相册宽度；
IMG_WIDTH=$（“div.album li”）.eq（0）.WIDTH（）；
控制台日志（IMG_宽度）；
});

还有一个事件处理程序

image.onload

，在加载映像时执行。有时甚至

image.onload

也不会触发，所以当图像宽度超过0时，您可以使用计时器进行检查。选中此项：