关于获取图片在网页加载后的高度

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

$(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的原理是等页面数据加载完再处理。也就是说图片加载完后再处理。

$(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;});// })

此方法可以获取到图片的真实高度，不过比较繁琐。

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

------------------------------------------------------------------------------------------------------------------分割线-----------------------------------------------------------------------------------------------------------

推荐一篇好文http://www.cnblogs.com/haoyijing/p/5818236.html
里面有讲到先使用懒加载再获取高度等多种办法，懒加载对我来说是比较鸡肋了，怎么看都会影响加载速度，还不如简单点~~~

关于获取图片在网页加载后的高度

猜你喜欢