元素里面有张图片,开始以为是图片没加载出来导致的,我再图片那加了个onload事件也是不行,求问为什么?
<div class="bd">
<ul>
<li><a href="#"><img src="images/icon_list01.png" class="one" /></a><p>家政服务</p></li>
<li><a href="#"><img src="images/icon_list02.png" /></a><p>医疗保健</p></li>
<li><a href="#"><img src="images/icon_list03.png" /></a><p>饮食服务</p></li>
<li><a href="#"><img src="images/icon_list04.png" /></a><p>生活照料</p></li>
<li><a href="#"><img src="images/icon_list05.png" /></a><p>康复护理</p></li>
<li><a href="#"><img src="images/icon_list06.png" /></a><p>心里疏导</p></li>
</ul>
</div>
css
.bd ul{ width:100%; float:left; padding-top:.1rem; }
.bd li{ width:30%; height: 100%; float:left; text-align:center; margin: .1rem;}
.bd li p{font-size: .28rem;}
.bd li a{display: inline-block; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* 取消链接高亮 */ }
.bd li img{ width:100%;}
js
var a = $('.bd ul li a').height();
$('.bd ul li a').height()这是a标签的高度,试试$('.bd ul li img').height();
$('img').each(function(index){
var $this = $(this);
var src = $this.attr('src');
var img = new Image()
img.onload = function(){
console.log(this.src, this.width);
}
img.src = src;
});
把a的属性设置为block吧,图片属于内联元素,a也属于内联元素。当内联元素在内联元素里面时,内部的内联元素就默认是一个字体的高度,我想21px是你的line-height的高度吧
js 获取 a的高度的时候, 图片还没有加载出来 ,拿不到高 跟 js的顺序有关。
Element.clientWidth可以获取到元素的宽度
该属性值会被四舍五入为一个整数。如果你需要一个小数值,可使用 element.getBoundingClientRect()。
语法
var intElemClientWidth = element.clientWidth;
来自
https://developer.mozilla.org...
图片css
属性呢?是不是有position:absolute;
或类似使图片不占div
空间的东西。
经过一轮百度之后得到:
function imgLoad(img, callback) {
var timer = setInterval(function() {
if (img.complete) {
callback(img)
clearInterval(timer)
}
}, 50)
}
imgLoad(img1, function() {
p1.innerHTML('加载完毕')
})