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. 洛谷 P3952 时间复杂度【模拟】

    把No写成NO,WA了一发-- 现在看这题也不难-- 用一个栈,记一下前面F的字母,是否合法,合法的有多长,每次入栈弹栈即可 #include<iostream> #include< ...

  3. 洛谷 P2764 最小路径覆盖问题【匈牙利算法】

    经典二分图匹配问题.把每个点拆成两个,对于原图中的每一条边(i,j)连接(i,j+n),最小路径覆盖就是点数n-二分图最大匹配.方案直接顺着匹配dsf.. #include<iostream&g ...

  4. Golang bash脚本自动创建一个go工程

    原作者的代码里面,存在智能引号问题,所以他的代码并不能正常运行: 这个是我微调后的版本. 代码如下: #!/bin/bash #————————————– # Module : mk_go_pro.s ...

  5. python爬虫爬取腾讯招聘信息 (静态爬虫)

    环境: windows7,python3.4 代码:(亲测可正常执行) import requests from bs4 import BeautifulSoup from math import c ...

  6. 51nod1183 编辑距离

    1183 编辑距离 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 编辑距离,又称Levenshtein距离(也叫做Edit Distance),是指两个 ...

  7. 第二个Struts2程序 应用动态Action

    1.创建web项目,添加struts2支持的类库,在web.xml中配置struts2过滤器. 2.创建名为UserAction的Action对象,并分别在其中编写add()和update()方法,用 ...

  8. 446 Arithmetic Slices II - Subsequence 算数切片之二 - 子序列

    详见:https://leetcode.com/problems/arithmetic-slices-ii-subsequence/description/ C++: class Solution { ...

  9. 启动Windows PowerShell ISE

    Windows Server 2008 R2 环境下,启动PoserShell ISE方法: 方法1:在cmd.exe控制台或运行框中,输入 powershell_ise.exe 执行即可. 方法2: ...

  10. AlertDialog的实现

    课程Demo 重点解析自定义对话框 public class MainActivity extends AppCompatActivity { private Button bt1; private ...