`
zhouyrt
  • 浏览: 1162705 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS/CSS module LazyLoad 之二

 
阅读更多

上一篇完成的JS的按需加载，这篇添加个新方法css，完成对CSS文件的加载。接口与JS相同，示例如下

LazyLoad.css(['a.css', 'b.css', 'c.css'], function(){
	console.log('css模块加载完毕');
});

 

Firebug中效果如下，

 

上一篇对JS的加载实现是通过script元素，css则是通过link元素。而link元素仅IE6/7/8/9和Opera中支持其onreadystatechange事件，Firefox/Safari/Chrome既不支持onreadystatechange，也不支持onload。这里取了一个巧使用setTimeout延迟加载。

 

HTML如下

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>LazyLoad_0.2.js</title>
		<script src="http://files.cnblogs.com/snandy/LazyLoad_0.2.js"></script>
		<script type="text/javascript">
			var ary = [
				'http://files.cnblogs.com/snandy/a.css',
				'http://files.cnblogs.com/snandy/b.css',
				'http://files.cnblogs.com/snandy/c.css'
			];
			function start(){
				LazyLoad.css(ary, function(){
				});
			}
		</script>
	</head>
	<body>
	<button onclick="start()">Start loading</button>
	</body>
</html>
 

 

页面初始时字体颜色，背景色等都是默认的。点击按钮“Start loading”后会载入a,b,c三个css文件。此时字体颜色变成红色，背景色为黄色。文字也居中了。

 

 

 

  • 大小: 17 KB
0
顶
4
踩
分享到：
| JS/CSS module LazyLoad 之一
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Angular4LazyloadAngular4懒加载htmljscss等资源

    Angular 4 懒加载（Lazy Loading）是提高应用程序性能的一种关键策略，它允许我们按需加载模块，而不是一次性加载整个应用。这显著减少了初始加载时间，尤其在大型项目中，用户可以更快地看到应用程序的主要界面，而...

    edge-magento-module-lazyload:外缘的Magento延迟加载产品模块

    安装和配置"edge-magento-module-lazyload"模块时，需要修改Magento的布局文件（XML），可能还需要定制一些CSS和JavaScript，以适应网站的现有样式和交互。 在"edge-magento-module-lazyload-master"这个压缩包中，...

    font-load-module-samples:CSS 字体加载模块示例

    本篇将深入探讨“font-load-module-samples”项目，以及如何利用CSS字体加载模块提升网页性能。 1. **CSS字体加载策略** - **延迟加载（Lazy Loading）**：传统CSS通过`@font-face`规则引入字体，可能导致页面渲染...

    基于webpack4搭建的react项目框架的方法

    在React组件中，我们使用`bundle-loader`导入组件，如`Home`，并用自定义的懒加载组件`LazyLoad`包裹： ```javascript import Home from "bundle-loader?lazy&name=[name]!./Home"; import React, { Component } ...

    angularjs-requirejs-lazy-load

    标题 "angularjs-requirejs-lazy-load" 指向的是一个使用 AngularJS 和 RequireJS 进行懒加载（Lazy Loading）的项目。这个项目旨在展示如何在基于 AngularJS 的应用中结合 RequireJS 来优化资源加载，提高应用程序...

    AngularJS中的按需加载ocLazyLoad示例

    在AngularJS中，为了优化大型应用的性能和用户体验，我们可以采用按需加载（Lazy Loading）技术，其中ocLazyLoad是一个非常实用的库，它允许我们在运行时动态加载模块、控制器、服务、指令等。以下是对ocLazyLoad的...

    angularjs ocLazyLoad分步加载js文件实例

    var myApp = angular.module("myApp", ["ui.router", "oc.lazyLoad"]); myApp.config(function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.when("", "/home"); $stateProvider.state('home', { ...

    使用Workbox20的Angular渐进式Web应用程序

    window.addEventListener('load', () =&gt; { navigator.serviceWorker .register('ngsw-worker.js') .then(registration =&gt; console.log('Service Worker registered with scope:', registration.scope)) .catch...

    yui 资源包

    此外，YUI的延迟加载（LazyLoad）特性，能让非核心模块在需要时才加载，进一步优化资源使用。 总结，YUI 3.9.0 r2是一个强大的前端开发框架，它提供了一整套工具和组件，以应对复杂的界面设计挑战，并通过优化资源...

    AngularJS动态加载模块和依赖的方法分析

    angular.module('myApp', ['oc.lazyLoad']); ``` ### 配置ocLazyLoad 在配置阶段，你可以使用`$ocLazyLoadProvider`来设置动态加载的参数： ```javascript .config(['$ocLazyLoadProvider', function($...

    Webapp Architecture

    - **LazyLoad**：按需加载资源，提高页面性能。 - **curl.js**：用于异步加载脚本和样式表的工具。 - **DeferJS**：延迟脚本执行。 - **jquery.defer.js**：基于jQuery的异步控制工具。 - **jQI**：jQuery插件...

    AngularJS使用ocLazyLoad实现js延迟加载

    var app = angular.module('formCtrlParts', ['oc.lazyLoad']); ``` 3. **控制器中的按需加载**：在需要使用延迟加载模块的控制器中，使用`$ocLazyLoad`服务加载具体的JavaScript文件。例如： ```javascript ...

    Angular-Ui-Router+ocLazyLoad动态加载脚本示例

    angular.module('myRouters', ['ui.router', 'oc.lazyLoad']) .state('index', { url: '/index', title: '首页 | 示例应用', views: { 'A': { templateUrl: 'components/header/header.html', controller: '...

    page-loading

    9. **压缩与合并**：通过Gzip压缩JavaScript文件，以及合并多个CSS和JS文件，可以减少HTTP请求次数，降低加载时间。 10. **缓存策略**：通过设置HTTP缓存头，可以让浏览器缓存资源，下次访问时直接从本地读取，加快...

Magicbox
Global site tag (gtag.js) - Google Analytics