Image预加载

<div class="hidden">
<script type="text/javascript">

var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
"./images/icon-1.png",
"./images/icon-2.png",
"./images/icon-4.png",
"./images/icon-5.png",
"./images/icon-3.png",
"./images/icon-6.png",
"./images/icon-7.png",
"./images/icon-8.png",
"./images/icon-9.png",
"./images/icon-10.png",
"./images/icon-11.png",
"./images/icon-12.png",
"./images/icon-13.png",
"./images/icon-14.png",
"./images/icon-15.png",
"./images/icon-16.png",
"./images/icon-17.png",
"./images/icon-18.png",
"./images/icon-19.png",
"./images/icon-20.png",

)
</script>
</div>

JS

function loadScript(src,fn){
var node = document.createElement("script");
node.setAttribute('async','async');
var timeID
var supportLoad = "onload" in node
var onEvent = supportLoad ? "onload" : "onreadystatechange"
node[onEvent] = function onLoad() {
if (!supportLoad && !timeID && /complete|loaded/.test(node.readyState)) {
timeID = setTimeout(onLoad)
return
}
if (supportLoad || timeID) {
clearTimeout(timeID)
fn(null,node);
}
}
document.head.insertBefore(node, document.head.firstChild);
node.src=src;
node.onerror=function(e){
fn(e);
}
}
loadScript("test.js",fail);

CSS

function loadCss(src,fn){
var node=document.createElement('link');
node.rel='stylesheet';
node.href=src;
document.head.insertBefore(node,document.head.firstChild);
if(node.attachEvent){
node.attachEvent('onload', function(){fn(null,node)});
}else{
setTimeout(function() {
poll(node, fn);
}, 0); // for cache
}
function poll(node,callback){
var isLoaded = false;
if(/webkit/i.test(navigator.userAgent)) {//webkit
if (node['sheet']) {
isLoaded = true;
}
}else if(node['sheet']){// for Firefox
try{
if (node['sheet'].cssRules) {
isLoaded = true;
}
}catch(ex){
// NS_ERROR_DOM_SECURITY_ERR
if (ex.code === 1000) {
isLoaded = true;
}
}
}
if(isLoaded){
setTimeout(function(){
callback(null,node);
},1);
}else{
setTimeout(function(){
poll(node,callback);
},10);
}
}
node.onLoad=function(){
fn(null,node);
}
}

JS

function loadScript(src,fn) {
var node = document.createElement("script");
node.setAttribute('async','async');
var timeID
var supportLoad = "onload" in node
var onEvent = supportLoad ? "onload": "onreadystatechange"
node[onEvent] = function onLoad() {
if (!supportLoad && !timeID && /complete|loaded/.test(node.readyState)) {
timeID = setTimeout(onLoad)
return
}

if (supportLoad || timeID) {
clearTimeout(timeID)
fn(null,node);
}
}

document.head.insertBefore(node, document.head.firstChild);
node.src=src;
node.onerror=function(e) {
fn(e);
}
}

JS、CSS、Image预加载的更多相关文章

  1. JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...

  2. nginx设置反向代理后,页面上的js css文件无法加载

    问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:j ...

  3. nginx反向代理转发后页面上的js css文件无法加载【原创】

    故障现象:nginx做代理转发后,发现页面上的js css文件无法加载,页面样式乱了. 原因:没有配置静态资源 解决js css文件无法加载无法访问的问题 解决办法: 修改配置文件nginx.conf ...

  4. nginx设置反向代理后端jenklins,页面上的js css文件无法加载

    转载 2017年06月14日 22:36:59 8485 问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2 ...

  5. js中的预加载与懒加载(延迟加载)

    js中加载分两种:预加载与延迟加载 一.  预加载,增强用户的体验,但会加载服务器的负担.一般会使用多种 CSS(background).JS(Image).HTML(<img />) . ...

  6. js原生图片懒加载 或 js原生图片预加载,html标签自定义属性

    使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...

  7. 【原生JS】图片预加载之有序预加载

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  8. 【原生JS】图片预加载之无序预加载

    图片预加载之无序预加载 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset= ...

  9. 嗅探js css 文件是否加载成功示例

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  10. js 实现图片预加载 (js操作 Image对象属性complete ,事件onload 异步加载图片)

    通过js操纵DOM很多情况下都是为了实现和当前页html元素的异步载入,我谈谈对Image对象的一些认识.看个例子:<input type="button" name=&qu ...

随机推荐

  1. Java-Runoob-高级教程-实例-字符串:14. Java 实例 - 连接字符串

    ylbtech-Java-Runoob-高级教程-实例-字符串:14. Java 实例 - 连接字符串 1.返回顶部 1. Java 实例 - 连接字符串  Java 实例 以下实例演示了通过 &qu ...

  2. 淘淘商城项目_同步索引库问题分析 + ActiveMQ介绍/安装/使用 + ActiveMQ整合spring + 使用ActiveMQ实现添加商品后同步索引库_匠心笔记

    文章目录 1.同步索引库问题分析 2.ActiveM的介绍 2.1.什么是ActiveMQ 2.2.ActiveMQ的消息形式 3.ActiveMQ的安装 3.1.安装环境 3.2.安装步骤 4.Ac ...

  3. SpringMVC数据绑定三(JSON 、XML))

    dhc chrome 地址https://chrome.google.com/webstore/detail/restlet-client-rest-api-t/aejoelaoggembcahagi ...

  4. vi常用设置

    vi不能使用退格键和上下左右键 因为ubuntu默认安装的是vim-tiny,所以需要安装完整版本 apt-get install vim 安装完再使用就可以了 vi本身是不带颜色的,vim带颜色,使 ...

  5. E20180207-ts

    crumb n. 碎屑(尤指面包屑或糕饼屑); 面包心; 些许,少许; <俚>可鄙的人物;

  6. C#中遍历ArrayList的三种方法(转)

    using System; using System.Collections; using System.Linq; using System.Text; namespace ArrayListDem ...

  7. Lodash 方法库 原生实现 待完结。。。

    'use strict' let _ = { // 将数组(array)拆分成多个 size 长度的区块,并将这些区块组成一个新数组. 如果array 无法被分割成全部等长的区块,那么最后剩余的元素将 ...

  8. 用jdbc连接数据库并简单执行SQL语句

    一:版本一.这种存在一个问题就是每执行一次操作都会创建一次Connection链接和且释放一次链接 1:创建pojo对象(OR映射,一个pojo类对应一张数据库表)   package com.yin ...

  9. (转)C语言运算符优先级 详细列表

    C语言运算符优先级 详细列表 文章转自:Slyar Home 优先级 运算符 名称或含义 使用形式 结合方向 说明 1 [] 数组下标 数组名[常量表达式] 左到右   () 圆括号 (表达式)/函数 ...

  10. 数论 HDOJ 5407 CRB and Candies

    题目传送门 题意:求LCM (C(N,0),C(N,1),...,C(N,N)),LCM是最小公倍数的意思,C函数是组合数. 分析:先上出题人的解题报告 好吧,数论一点都不懂,只明白f (n + 1) ...