zoukankan      html  css  js  c++  java
  • $(document).ready() 与window.onload的差别

         近期项目中要做一个消息提醒功能,用户登录完毕后,从右下角滑出一个消息模块,类似qq弹出的广告,只是是在浏览器中的,更大了一些而已。
         開始的做法是在$(document).ready()中使用的是jQuery的slideDown展示消息div,因为页面里面有六七个块是iframe,每一个iframe载入时间都比較长。内容也比較多,结果iframe没载入完,消息div就出来了,并且动画一卡卡的,效果实在无法忍受。
         后来在jQuery官网上的一片文章http://learn.jquery.com/about-jquery/how-jquery-works/发现jQuery的$(document).ready()不是等页面所有载入完再运行的,而是当前页面的dom载入完成后就运行了,这样效率非常高,速度也快。只是要想等页面所有载入完,包含内部的iframe都载入完再运行,就还要使用window.onload事件了,以下说说window.onload和$(document).ready()两者的差别。
         主要是运行时间不同,上面也说了window.onload必须等到页面内包含图片,iframe等全部元素载入完成后才干运行。而$(document).ready()是DOM结构绘制完成后就运行,不必等到载入完成。也就是说运行时可能图片还没完成下载。iframe内容没载入完成等。

         两者的运行时间不同。作用也不同。绝大部分情况下$(document).ready()的作用要好一些,可是要注意的是由于$(document).ready()运行时可能图片等内容没载入完。要想获取图片尺寸这类属性不一定有效。

    可是等所有页面都载入完再获取某个图片的尺寸。又浪费了时间,怎么办呢?好在jQuery给我们提供了一个更好的办法,能够使用load方法给指定元素绑定载入完毕时的事件。如$("img").load(function(){……});

         load方法另一个优点。假设单纯的写window.onload注冊事件的话仅仅会运行最后一个,假设要注冊多个。须要额外的代码来推断,而使用jQuery的load方法能够注冊多个事件,$(window).load()和window.onload是等效的,可是load方法能够注冊多个事件。



  • 相关阅读:
    Liunx运维(七)-用户管理及用户信息查询命令
    容器网络原理分析:veth 和 network namespace
    浅谈 Docker 网络:单节点多容器
    浅谈 Docker 网络:单节点单容器
    图图图
    LinkPrediction可能有用的数据集
    2021年展望
    2020年总结
    毕业设计:基于web的外卖订餐系统的设计与实现
    机器学习和数据分析在实体识别方面的简单应用
  • 原文地址:https://www.cnblogs.com/wgwyanfs/p/6843934.html
Copyright © 2011-2022 走看看