今天在開發有道漢語詞典移動版的時候遇到了一個很奇怪的問題。

在android設備上訪問的時候，總是發現有底部背景色不能完全渲染出來的情況（有時候又是正常的，一會兒出現一會兒不出現，iphone設備也是完全ok），就是一半是底色，還有一半沒了。。。

仔細觀察了一下發現在打開網頁的時候先顯示了頭部的小圖片和標題以及底部的按鈕，再顯示中間的大圖，有個加載過程。

ok，懷疑是圖片還沒加載完畢，導致高度計算出錯，給底部設背景的時候加載完的那塊就沒顏色。。。

那么使用$(window).load()函數來解決！

網上有個解釋：

The?window load?event executes a bit later when the complete page is fully loaded, including all frames, objects and images. Therefore functions which concern images or other page contents should be placed in the load event for the window or the content tag itself.

看著像哈，代碼如下：

var height = document.body.clientHeight;$("#doc2").css("height", height+"px");$("#doc2").css("background-color", "E84C32");

好吧，不管用，還是有這個現象。。。

干脆給圖片加判斷吧，我獲取了第一個slider，然后判斷它的onload

var setPosition = function(){var height = document.body.clientHeight;$("#doc2").css("height", height+"px");$("#doc2").css("background-color", "E84C32");}var img = $('#firstimg');if (img.prop('complete')) {setPosition();} else {img.load(function() { setPosition(); });}

吼吼，搞定了，這個之后還得研究下為何window.load失效了。。。還有iphone為啥沒問題。。。

轉載于:https://www.cnblogs.com/hongchenok/p/3912712.html

總結

以上是生活随笔為你收集整理的android 浏览器对图片加载高度渲染问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。