2015-07-12 58 views
0

我插入的innerHTML在調整窗口大小之前不會顯示在瀏覽器中。下面是我在對這個問題的部位:http://www.granthpark.me/outside在調整Chrome瀏覽器的大小之前DOM元素不會加載(在Safari中完美地工作)

<h1 id="mainz"> 
    <script> 
    jQuery(document).ready(function($) { 
     $.ajax({ 
     url : "http://api.wunderground.com/api/c1ea49b3e06dc3b3/geolookup/conditions/q/CA/San_Francisco.json", 
     dataType : "jsonp", 
     success : function(parsed_json) { 
     var weather = parsed_json['current_observation']['weather']; 
     console.log(weather); 
     if (weather == "Patches of Fog" || weather == "Shallow Fog" || weather == "Partial Fog" || weather == "Overcast" || weather == "Clear" || weather == "Partly Cloudy" || weather == "Mostly Cloudy" || weather == "Scattered Clouds" || weather == "Light Mist" || weather == "Heavy Mist") { 
     document.getElementById("mainz").innerHTML = "The weather at Outside Lands is OKAY!"; 
     } 
     else { 
     document.getElementById("mainz").innerHTML = "The weather at Outside Lands sucks right now."; 
     } 
    } 
     }); 
    }); 
    </script> 
</h1> 
<p id="weather" style="font-size:30px;"> 
    <script> 
    jQuery(document).ready(function($) { 
     $.ajax({ 
     url : "http://api.wunderground.com/api/c1ea49b3e06dc3b3/geolookup/conditions/q/CA/San_Francisco.json", 
     dataType : "jsonp", 
     success : function(parsed_json) { 
     var location = parsed_json['location']['city']; 
     var temp_f = parsed_json['current_observation']['temp_f']; 
     var weather = parsed_json['current_observation']['weather']; 
     document.getElementById("weather").innerHTML = "Current temperature in " + location + " is " + temp_f + "&#176" + "F" + " and it's " + weather.toLowerCase() + "."; 
     } 
     }); 
    }); 
    </script> 
</p> 

這裏是我的CSS的情況下:http://www.granthpark.me/assets/css/main.css

+0

無法在chrome v43上重現。你也可能想對json做一個單一的請求,並在同一個成功函數中收集你的回調。 – Kaiido

+0

這不是爲我加載,這是實際的網站,如果它有幫助http://www.granthpark.me/outside –

+0

好吧,可以repro在您的網站,奇怪的是,如果我更新開發工具的內部文本,它贏了不會更新,直到css被重新繪製。也許在你的CSS的東西可以防止這一點。 – Kaiido

回答

1

確實是奇怪的行爲。

它似乎來自你的#wrapper樣式表:

刪除position:fixed或者更換到position:absolute,它似乎工作。

不清楚知道爲什麼,因爲你的CSS很複雜。

0

它爲我在克羅姆和Firefox,但如果你沒有找到一個更好的解決方案,您在修改innerHTML之後,可以嘗試將此行$(window).trigger('resize');添加到ajax成功函數中。

+0

既然你提供了我試過的鏈接,並意識到它沒有解決問題。 – Scraph

相關問題