一、结论

CSS可以在页面加载完成后随时渲染。举个例子:通过js给某个元素加一个id或者css,只要这个id或者css有对应的样式,此元素的样式就会自动生效。

JS不可以在页面加载完成后生效。最明显的例子就是使用EasyUI的时候,iframe中哪些样式无效(EasyUi是依靠JS进行样式处理的,所以无法运行JS,那么样式也就无法设置。简单点说:EasyUi是一个JS的前端框架,Bootstrap是一个CSS的前端框架,二者不同)。

JS默认是不可以在页面加载完成后生效的。

二、现象

对于EasyUi那样的js核心的框架我没有想到办法,但是对于一些简单的时间还是可以处理的。

以下是我实际开发遇到的一个问题,我将其抽象出来:

某个按钮class为"tt"不是原生的HTML存在页面中的,而是通过页面加载过程中的JS生成的.

在最初我有如下语句:

$(".tt").click(function(){
alert("xxx");
});

但是这个方法死活触发不了,根据上述第一点我的结论可知,这个是因为页面的JS已经加载完了,此时元素还没有生成。自然而言的无法有效的绑定事件。

那么怎么处理了?

<button onclick="mc-alert()">TELL</button>

将alert()放在方法mc-alert()中,即可。

三、深度剖析

留待以后懂得时候补充,现在不太清楚啊。。。

JS和CSS加载(渲染)机制不同的更多相关文章

  1. css加载是否会阻塞dom树渲染

    这里说的是头部引入css的情况 首先,我们都知道:css是由单独的下载线程异步下载的. 咱们先分析下css加载会影响什么,刚才的问题太笼统了,咱们需要细化一下. 会影响什么呢? 一个就是DOM树解析, ...

  2. 定时器详解和应用、js加载阻塞、css加载阻塞

    1.setTimeout().setInterval()详解和应用 1.1 详解: setTimeout.setInterval执行时机 1.2 存在问题: setInterval重复定时器可能存在的 ...

  3. 浏览器加载渲染HTML、DOM、CSS、 JAVASCRIPT、IMAGE、FLASH、IFRAME、SRC属性等资源的顺序总结

    页面响应加载的顺序:   1.域名解析->加载html->加载js和css->加载图片等其他信息 DOM详细的步骤如下: 解析HTML结构. 加载外部脚本和样式表文件. 解析并执行脚 ...

  4. 性能优化之html、css、js三者的加载顺序

    前言 我们知道一个页面通常由,html,css,js三部分组成,一般我们会把css文件放在head头部加载,而js文件则放在页面的最底部加载,想要知道为什么大家都会不约而同的按照这个标准进行构建页面, ...

  5. nginx实现动态分离,解决css和js等图片加载问题

    改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 http://www.cnb ...

  6. js插件动态加载js、css解决方案

    最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...

  7. SpringMvc架构下css、js、jpg加载失败问题

    SpringMvc架构下css.js.jpg加载失败问题 springMvc搭建成功后,页面出现一些错误,jsp.js等静态资源加载失败.导致页面没有显示任何样式以及 此处原因很简单,是因为相对路径在 ...

  8. 关于html,css,js三者的加载顺序问题

    <head lang="en"> <meta charset="utf-8"> <title></title> ...

  9. 对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析

    来自   https://blog.csdn.net/u011088260/article/details/79563315   最近在研究HTML页面中JavaScript的执行顺序问题.在Java ...

随机推荐

  1. List<T> 求差集

    List<, , , , , }; List<, , , , , }; List<int> c = b.Except(a).ToList(); foreach (int i i ...

  2. Inno Setup入门(八)——有选择性的安装文件

    这主要使用[Components]段实现,一个演示的代码如下: [setup] ;全局设置,本段必须 AppName=Test AppVerName=TEST DefaultDirName=" ...

  3. mongodb分片认证

    启动configsvr 1. 确保mongdb的configsvr是采用service模式启动的,即从/etc/init.d下的脚本启动的,其用户是mongod. 2. 确保mongod的配置文件完全 ...

  4. PCI源码学习笔记

    这个是PCI的关键结构体. static const struct file_operations proc_bus_pci_operations = { .owner = THIS_MODULE, ...

  5. linux 内核协议栈收报流程(一)ixgbe网卡驱动

    首先模块加载insmod ixgbe.ko module_init(ixgbe_init_module); module_init(ixgbe_init_module); { int ret; pr_ ...

  6. Object.setPrototypeOf 方法的使用

    将一个指定的对象的原型设置为另一个对象或者null(既对象的[[Prototype]]内部属性). 语法 Object.setPrototypeOf(obj, prototype) 参数 obj 将被 ...

  7. 1.1 python 安装(Windows)

    1.浏览器输入URL http://www.python.org/download/ https://www.python.org/downloads/release/python-2712/ Win ...

  8. 1.4 测试各阶段(单元、集成、系统 、Alpha、Beta、验收)

    单元测试:单元测试是对软件基本组成单元(软件设计的最小单位)进行正确性检验的测试工作,如函数.过程(function,procedure)或一个类的方法(method).单元测试是一个方法层面上的测试 ...

  9. python2.x 使用protobuf

    1.在windows下配置protobuf 1.1 下载对应的包,包含两个:protoc.exe和源码文件(protoc也可以自己生成) 下载地址1 --- google code最近在迁移,也许以后 ...

  10. java获取程序执行时间

    第一种是以毫秒为单位计算的. //伪代码 long startTime=System.currentTimeMillis(); //获取开始时间 doSomeThing(); //测试的代码段 lon ...