注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

早衰男的巢

大音希声 道隐无名

 
 
 

日志

 
 

JS+jQuery: document.ready 与 $(window).load 区别  

2017-03-18 22:45:45|  分类: UI/CSS/HTML |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
*这是一篇关于前端的弱智日志。
习惯性的用 document.ready 在页面加载完毕后执行一些东西,发现获取不到图像(未经过CSS定义)的宽高无法取出。
后来改用 $(window).load(function(){}) 替换解决问题。

我想我之前理解有误,document.ready并不是指页面全部东西都加在好了,而仅仅是指文档自身的全文以及外链的js及css,并不包括 图像、声音、视频等多媒体资源,后者是异步加载的。这导致了最初的问题,而 $(window).load 则指的是全部资源加载完毕浏览器已经结束loading动作后触发

对比效果可看以下的代码.

<img class="bg" src="bg.jpg" />

<script>
var base_w,base_h;
var bgimg = $("img.bg")[0];
//页面加载完毕后进行初始化

//document.ready = $(function(){ //得到的结果 bgimg 的width 和height是0
$(window).load(function(){
//定位三个浮动框
base_w = $(bgimg).width();
base_h = $(bgimg).height();
console.log("window.load bg.w_h:",base_w,base_h);
});

//引用下文的内容会被认为undefine

console.log("outer:"+$("#debugdiv").html()); //outer:undefined

//等同于 document.ready = $(function(){...});
$(function(){
console.log("innner:"+$("#debugdiv").html());//inner:debug content

//定位三个浮动框

base_w = $(bgimg).width();
base_h = $(bgimg).height();
console.log("document.ready bg.w_h:",base_w,base_h);

});
</script>

<div style="display: none;" id="debugdiv" >debug content</div>


.....没什么做前端的天赋,每次都好为小问题费很多时间。额
  评论这张
 
阅读(26)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018