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. String 对象

    1 你使用位置(索引)可以访问字符串中任何的字符: var str="this is a demo"; alert(str[3])//    s 字符串的索引从零开始, 所以字符串 ...

  2. Nvidia GPU 算力查询

    GPU Compute Capability Tesla K80 3.7 Tesla K40 3.5 Tesla K20 3.5 Tesla C2075 2.0 Tesla C2050/C2070 2 ...

  3. jsDoc 使用及配置!

    原文地址:http://www.cnblogs.com/hxling/archive/2012/11/27/2791067.html jsDoc 说白了就是帮助你生成JS的文档,但有个前提,就是你编写 ...

  4. 关于使用java执行shell脚本获取centos的硬盘序列号和mac地址

    1.获取硬盘序列号: 新建shell脚本文件: identifier.sh, 内容为: diskdata=`fdisk -l` diskleft=${diskdata#*"identifie ...

  5. bzoj 4245: [ONTAK2015]OR-XOR【按位贪心】

    知道按位贪心但是不知道怎么贪-- 求一个a的异或前缀和s,然后按位从大到小贪心,ans的当前位能为0的条件是s中有>=m个位置这一位为0且没有flag,并且s[n]的这一位为0 如果符合要求,那 ...

  6. zabbix离线安装

    LAMP环境 1.apache安装 #安装包(yum install --downloadonly --downloaddir=/opt/apache httpd httpd-devel) 1.1拷贝 ...

  7. 451 Sort Characters By Frequency 根据字符出现频率排序

    给定一个字符串,请将字符串里的字符按照出现的频率降序排列.示例 1:输入:"tree"输出:"eert"解释:'e'出现两次,'r'和't'都只出现一次.因此' ...

  8. 413 Arithmetic Slices 等差数列划分

    如果一个数列至少有三个元素,并且任意两个相邻元素之差相同,则称该数列为等差数列.例如,以下数列为等差数列:1, 3, 5, 7, 97, 7, 7, 73, -1, -5, -9以下数列不是等差数列. ...

  9. core\stm32f10x.h(244): error: #67: expected a "}"

  10. 在Bootstrap中得模态框(modal)中下拉不能显示得问题

    $.fn.modal.Constructor.prototype.enforceFocus = function () { $("#insertModal").on("s ...