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. 小程序-demo:小程序示例-page/common

    ylbtech-小程序-demo:小程序示例-page/common 1.返回顶部 0.     1. 2. pages/common返回顶部 1. -lib --weui.wxss /*! * we ...

  2. 【190】修改 PowerShell & CMD 显示字体

    方法一:Windows7更改替换cmd(powershell)字体完全方法教程 说明:该方法将字体修改成只能显示英文,对于某些中文会乱码!(chcp 850) 方法二:添加中文字体(chcp 936) ...

  3. Linq list 排序,Dictionary 排序

    C# 对List成员排序的简单方法 http://blog.csdn.net/wanzhuan2010/article/details/6205884 LINQ之路系列博客导航 http://www. ...

  4. PCB Genesis SET拼板(圆形板拼板) 实现效果(二)

    越来发现Genesis采用Surface多边形数据结构的重要性了,当撑握了多边形缩放,交集, 差集,并集等算法, 想实现PCB拼板简直轻而易举了;当然借助多边形算法可以开发出更多的PCB实用的工具出来 ...

  5. E20170520-ts

    regexp  n. 正则表达式 metacharacter メタ文字 元字符 quote   vt. 引述,引用; escape  v. 逃脱; 逃离;   n. 逃走; 逃跑工具或方法;  reg ...

  6. CF915E Physical Education Lessons(珂朵莉树)

    中文题面 据说正解是动态开点线段树而且标记也不难下传的样子 然而这种区间推平的题目还是喜欢写珂朵莉树啊……码量小…… 虽然真要构造的话随便卡…… //minamoto #include<cstd ...

  7. 'ALTER TABLE SWITCH' 语句失败。表'MGXXX.dbo.user_XXX' 已分区,但 索引'ix_user_XXX_user_id' 未分区。

    问题描述: 今天在做分区切换的时候把旧log数据切到clear表,遇到了这个问题,顺便做下笔记记录一下解决方法 'ALTER TABLE SWITCH' 语句失败.表'MGXXX.dbo.user_X ...

  8. 利用OneDNS同步chrome数据

    将DNS服务器改成OneDNS的 117.50.11.11 备用改为 117.50.22.22 然后刷新自己的DNS缓存,接着测试一下https://test.onedns.net即可 这样既可以正常 ...

  9. Python unittest基本框架组成(1)

    Python的标准库——unittest(可以实现自动化测试框架的搭建) python unittest四大组成“元件”: test fixture(测试脚手架)——测试代码的运行环境,指测试准备前和 ...

  10. [POI2008]KUP

    Description 给一个\(n\times n\)的地图,每个格子有一个价格,找一个矩形区域,使其价格总和位于[k,2k] Input 输入k n(n<2000)和一个\(n\times ...