JQ代码:JQ获取图片在网页加载后的高度

最近在做一个带有轮播的项目,轮播思想是根据获取图片宽度高度再赋值给轮播的div。
JQ代码

$(function(){
var slidesImgWidth=$('.slides_img').width();
var slidesImgHeight=$('.slides_img').height();
$('#slider1_container ,#slides_items').width(slidesImgWidth);
$('#slider1_container ,#slides_items').height(slidesImgHeight);
})

本地测试是ok的,但是放到服务器后浏览发现第一次打开页面全是空白,刷新后恢复正常,打印后才发现原来是一开始图片未加载获取不到高度。针对此问题百度出一大堆的看法,
下面是本人整理出的两种快捷偏方,请各位笑纳。
1.window.onload=function(){}或者$(window).load(function(){})

window.onload=function(){
  	var slidesImgWidth=$('.slides_img').width();
  	var slidesImgHeight=$('.slides_img').height();
  	$('#slider1_container ,#slides_items').width(slidesImgWidth);
   	$('#slider1_container ,#slides_items').height(slidesImgHeight);
	
}

window.onload的原理是等页面数据加载完再处理。也就是说图片加载完后再处理。
2.此方法可以获取到图片的真实高度,不过比较繁琐。

$(function(){
// 
var winWidth = parseInt($(window).width());
$('.slides_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,this.height);//打印出图片真是高度
var slidesImgWidth2=this.width;
if(slidesImgWidth2>winWidth){
$($this).css("width","100%").css("height","auto");
}else{$($this
).css(
"width"
,realWidth+
'px'
).css(
"height"
,realHeight+
'px'
);//插入真实高度
}var slidesImgWidth1=$('.slides_img').width();//获取页面里的图片宽度var slidesImgHeight1=$('.slides_img').height();获取页面里的图片高度$('#slider1_container ,#slides_items').width(slidesImgWidth1);$('#slider1_container ,#slides_items').height(slidesImgHeight1);}img.src = src;});// })

这两种办法都有一点点小问题,页面加载的一瞬间轮播高度会变,不过不影响我们达到目的

发表评论

电子邮件地址不会被公开。 必填项已用*标注

赞助商

微信扫一扫,分享到朋友圈

JQ代码:JQ获取图片在网页加载后的高度
返回顶部

显示

忘记密码?

显示

显示

获取验证码

Close