我目前的理解,他们之间的区别,其实说白了,就类似与吃饭过程中和吃饭结束。
.ready():是DOM加载过程中,可以重复使用,就相当于是一口一口吃饭,按顺序吃,但数量无限制。
.onload:是页面都加载完了,就只有一次机会,就像吃完饭这个事,一顿饭只有一次。
在调css样式的时候,因为手机平板等移动端的图片高度经常是不固定的,需要根据宽度的百分比来设置图片的动态高度。那么就会遇到一个问题,如果用ready,并且,图片是漂浮的,图片上面还有漂浮的字,这个时候,如果拿不到图片的动态高度,那么字就会叠到一起。这个问题在本地测试的时候一般不明显,但是放到服务器上,稍微卡一下,一旦拿不到图片的动态高度,那样式就会惨不忍睹。
这个时候,就必须用window.οnlοad=function(){}来解决问题,当图片的动态高度都拿到了,再去处理后面的字这些动态样式。
同理,如果能搞明白这个顺序,对图片的懒加载技术,就会有更深刻的理解。关于图片懒加载,我会等用熟悉以后,再来写~
下面是一些案例代码:
<script type="text/javascript">
//屏幕的高
// var pmg = $(window).height();
// $('.main').css({"height":pmg});
//之前用.ready(),出现了很多问题,就算用延迟加载都不行。
// $(document).ready(function(){
// setTimeout(gd,500);
// });
//还是用window.onload靠谱
window.οnlοad=function(){
gd();
};
function gd(){
var tpg = $('#tpp').height();
var rqg = $('.rq').height();
$('.card').css({"height":rqg});
}
</script>