關於獲取圖片在網頁加載後的高度

最近在做一個帶有輪播的項目，輪播思想是根據獲取圖片寬度高度再賦值給輪播的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的原理是等頁面數據加載完再處理。也就是說圖片加載完後再處理。

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

此方法可以獲取到圖片的真實高度，不過比較繁瑣。

這兩種辦法都有一點點小問題，頁面加載的一瞬間輪播高度會變，不過不影響我們達到目的

------------------------------------------------------------------------------------------------------------------分割線-----------------------------------------------------------------------------------------------------------

推薦一篇好文http://www.cnblogs.com/haoyijing/p/5818236.html
裏面有講到先使用懶加載再獲取高度等多種辦法，懶加載對我來說是比較雞肋了，怎麼看都會影響加載速度，還不如簡單點~~~