<!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(){
在这个回调里 图片宽高都已经加载好可用了}
解决办法二 你提前已经定了轮播图片的高度
如果你想做可自适应的 请在每次滑动的时候重新获取滑动距离