利用CSS、JavaScript及Ajax实现图片预加载的三大方法

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。本文将分享三个不同的预加载技术，来增强网站的性能与可用性。

方法一：用CSS和JavaScript实现预加载

实现预加载图片有很多方法，包括使用CSS、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的解决方案，十分高效。

单纯使用CSS，可容易、高效地预加载图片，代码如下：

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }  
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }  
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

将这三个ID选择器应用到(X)HTML元素中，我们便可通过CSS的background属性将图片预加载到屏幕外的背景上。只要这些图片的路径保持不变，当它们在Web页面的其他地方被调用时，浏览器就会在渲染过程中使用预加载（缓存）的图片。简单、高效，不需要任何JavaScript。

该方法虽然高效，但仍有改进余地。使用该法加载的图片会同页面的其他内容一起加载，增加了页面的整体加载时间。为了解决这个问题，我们增加了一些JavaScript代码，来推迟预加载的时间，直到页面加载完毕。代码如下：

// better image preloading @ <a href="http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/">http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/</a>  
function preloader() {  if (document.getElementById) {  document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";  document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";  document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px";  }  
}  
function addLoadEvent(func) {  var oldonload = window.onload;  if (typeof window.onload != 'function') {  window.onload = func;  } else {  window.onload = function() {  if (oldonload) {  oldonload();  }  func();  }  }  
}  
addLoadEvent(preloader);

在该脚本的第一部分，我们获取使用类选择器的元素，并为其设置了background属性，以预加载不同的图片。

该脚本的第二部分，我们使用addLoadEvent()函数来延迟preloader()函数的加载时间，直到页面加载完毕。

如果JavaScript无法在用户的浏览器中正常运行，会发生什么？很简单，图片不会被预加载，当页面调用图片时，正常显示即可。

方法二：仅使用JavaScript实现预加载

上述方法有时确实很高效，但我们逐渐发现它在实际实现过程中会耗费太多时间。相反，我更喜欢使用纯JavaScript来实现图片的预加载。下面将提供两种这样的预加载方法，它们可以很漂亮地工作于所有现代浏览器之上。

JavaScript代码段1

只需简单编辑、加载所需要图片的路径与名称即可，很容易实现：

<div class="hidden">  <script type="text/javascript">  <!--//--><![CDATA[//><!--  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(  "http://domain.tld/gallery/image-001.jpg",  "http://domain.tld/gallery/image-002.jpg",  "http://domain.tld/gallery/image-003.jpg"  )  //--><!]]>  </script>  
</div>

该方法尤其适用预加载大量的图片。我的画廊网站使用该技术，预加载图片数量达50多张。将该脚本应用到登录页面，只要用户输入登录帐号，大部分画廊图片将被预加载。 

JavaScript代码段2

该方法与上面的方法类似，也可以预加载任意数量的图片。将下面的脚本添加入任何Web页中，根据程序指令进行编辑即可。

<div class="hidden">  <script type="text/javascript">  <!--//--><![CDATA[//><!--  if (document.images) {  img1 = new Image();  img2 = new Image();  img3 = new Image();  img1.src = "http://domain.tld/path/to/image-001.gif";  img2.src = "http://domain.tld/path/to/image-002.gif";  img3.src = "http://domain.tld/path/to/image-003.gif";  }  //--><!]]>  </script>  
</div>

正如所看见，每加载一个图片都需要创建一个变量，如“img1 = new Image();”，及图片源地址声明，如“img3.src = "../path/to/image-003.gif";”。参考该模式，你可根据需要加载任意多的图片。

我们又对该方法进行了改进。将该脚本封装入一个函数中，并使用 addLoadEvent（），延迟预加载时间，直到页面加载完毕。

function preloader() {  if (document.images) {  var img1 = new Image();  var img2 = new Image();  var img3 = new Image();  img1.src = "http://domain.tld/path/to/image-001.gif";  img2.src = "http://domain.tld/path/to/image-002.gif";  img3.src = "http://domain.tld/path/to/image-003.gif";  }  
}  
function addLoadEvent(func) {  var oldonload = window.onload;  if (typeof window.onload != 'function') {  window.onload = func;  } else {  window.onload = function() {  if (oldonload) {  oldonload();  }  func();  }  }  
}  
addLoadEvent(preloader);

方法三：使用Ajax实现预加载

上面所给出的方法似乎不够酷，那现在来看一个使用Ajax实现图片预加载的方法。该方法利用DOM，不仅仅预加载图片，还会预加载CSS、JavaScript等相关的东西。使用Ajax，比直接使用JavaScript，优越之处在于JavaScript和CSS的加载不会影响到当前页面。该方法简洁、高效。

window.onload = function() {  setTimeout(function() {  // XHR to request a JS and a CSS  var xhr = new XMLHttpRequest();  xhr.open('GET', 'http://domain.tld/preload.js');  xhr.send('');  xhr = new XMLHttpRequest();  xhr.open('GET', 'http://domain.tld/preload.css');  xhr.send('');  // preload image  new Image().src = "http://domain.tld/preload.png";  }, 1000);  
};

上面代码预加载了“preload.js”、“preload.css”和“preload.png”。1000毫秒的超时是为了防止脚本挂起，而导致正常页面出现功能问题。

下面，我们看看如何用JavaScript来实现该加载过程：

window.onload = function() {  setTimeout(function() {  // reference to <head>  var head = document.getElementsByTagName('head')[0];  // a new CSS  var css = document.createElement('link');  css.type = "text/css";  css.rel  = "stylesheet";  css.href = "http://domain.tld/preload.css";  // a new JS  var js  = document.createElement("script");  js.type = "text/javascript";  js.src  = "http://domain.tld/preload.js";  // preload JS and CSS  
        head.appendChild(css);  head.appendChild(js);  // preload image  new Image().src = "http://domain.tld/preload.png";  }, 1000);  };

这里，我们通过DOM创建三个元素来实现三个文件的预加载。正如上面提到的那样，使用Ajax，加载文件不会应用到加载页面上。从这点上看，Ajax方法优越于JavaScript。

转自：http://www.csdn.net/article/2013-10-15/2817187-3-ways-preload-images-css-javascript-ajax

转载于:https://www.cnblogs.com/chenjiacheng/p/6867158.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/252666.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ThinkJS前端搭配vue时的Nginx配置

ThinkJS前端搭配vue时的Nginx配置

Thinkjs 作为奇舞团开源的nodejs mvc框架之一&#xff0c;引起了很多NodeJS程序员的亲赖。但是其关于静态文件处理部分支持不够完善&#xff0c;主要是体现在SPA单页应用&#xff0c;之前在ThinkJS 2.*版本时写过一个关于处理单页应用静态资源的middleware think-resource-spa,…
阅读更多...
SQL疑难杂症【4 】大量数据查询的时候避免子查询

SQL疑难杂症【4 】大量数据查询的时候避免子查询

前几天发现系统变得很慢&#xff0c;在Profiler里面发现有的SQL执行了几十秒才返回结果&#xff0c;当时的SQL如下&#xff1a; 可以看得出来&#xff0c;在652行用了子查询&#xff0c;恰巧目标表(QS_WIP)中的记录数为100000000&#xff0c;通过如下SQL可以得到&#xff1a; S…
阅读更多...
2020-11-27

2020-11-27

总结各种RGB转YUV的转换公式 如果数据位宽都以8位来说.ITU709:允许 0~255之间所有数据 ITU601:只允许 16~235之间数据, 601是SDTV的数据结构&#xff1b; 656是SDTV的interface 709是HDTV的数据结构 &#xff1b;1120是HDTV的interface 最近在学习视频的颜色空间转换&#x…
阅读更多...
python学习笔记1-基础语法

python学习笔记1-基础语法

1 在3版本中print需要加上括号2 多行语句&#xff1a;用\连接 1 item_one1 2 item_two2 3 item_three3 4 total item_one \ 5 item_two \ 6 item_three 7 print (total) 3 引号 　　字符串通常在引号中 不管是单引号 双引号还是三引号　　 必须保证前后一致…
阅读更多...
『原创』一个基于Win CE 5.0的Txt文件阅读器

『原创』一个基于Win CE 5.0的Txt文件阅读器

最近&#xff0c;拿到一台亲戚送的GPS导航仪&#xff0c;其系统是基于WinCE5.0的&#xff0c;所以我觉得可以写点小程序上去&#xff0c;上网一搜&#xff0c;还附带破解方法&#xff0c;把GPS破解后就变成一台屏幕超大的PDA了&#xff0c;于是我想用它看电子书&#xff0c;无奈…
阅读更多...
ARM Cortex-A系列（A53、A57、A73等）处理器性能分类与对比

ARM Cortex-A系列（A53、A57、A73等）处理器性能分类与对比

在如今这个电子产品泛滥的年代&#xff0c;仅仅靠品牌或是外观已经不足以辨别产品的优劣&#xff0c;其内置的处理器自然也就成为了分辨产品是否高端的标准之一。那么我们今天就不妨好好了解一下近几年来电子产品中较为主流的RAM处理器。 在这之前让我们先简单认识一下处理器的…
阅读更多...
批量创建10个系统帐号tianda01-tianda10并设置密码

批量创建10个系统帐号tianda01-tianda10并设置密码

#1、添加用户 useradd tianda01#2、非交互式给密码 echo "pass"|passwd --stdin tianda#3、01-10 加0思路 (1)echo {00..10}(2)seq -w 10#随机密码6种方法 (1)echo $RANDOM | md5sum | cut -c 1-8(2)yum -y install expect mkpasswd -l 12 -d 5 #expect随机mkpasswd …
阅读更多...
DIV常用属性大全自己整理

DIV常用属性大全自己整理

一、属性列表 代码如下:color : #999999 文字颜色 font-family : 宋体 文字字型 font-size : 10pt 文字大小 font-style:itelic 文字斜体育 font-variant:small-caps 小字体 letter-spacing : 1pt 文字间距 line-height : 200% 设定行高 font-weight:bold 文字粗体 vertical-a…
阅读更多...
.NET 3.5 - DLINQ(LINQ to SQL)之面向对象的添加、查询、更新和删除

.NET 3.5 - DLINQ(LINQ to SQL)之面向对象的添加、查询、更新和删除

步步为营VS 2008 .NET 3.5(8) - DLINQ(LINQ to SQL)之面向对象的添加、查询、更新和删除作者&#xff1a;webabcd介绍以Northwind为示例数据库&#xff0c;DLINQ(LINQ to SQL)之完全面向对象的添加操作、查询操作、更新操作和删除操作示例Sample.aspx <% Page Language&quo…
阅读更多...
ARM处理器的分类

ARM处理器的分类

对于ARM处理器而言&#xff0c;其目前有Classic系列、Cortex-M系列、Cortex-R系列、Cortex-A系列和Cortex-A50系列5个大类。 Classic系列 该系列处理器由三个子系列组成&#xff1a; ARM7系列&#xff1a;基于ARMv3或ARMv4架构 ARM9系列&#xff1a;基于ARMv5架构 ARM11系列…
阅读更多...
Poj 1019

Poj 1019

传送门&#xff1a;http://poj.org/problem?id1019 主要是找数学规律 然后用好pow和log函数&#xff0c;由于数组过大&#xff0c;数组的类型用unsigned 1 #include<iostream>2 #include<cmath>3 using namespace std;4 5 int t;6 int k;7 int n;8 unsigned a[312…
阅读更多...
ARM版本系列及家族成员梳理

ARM版本系列及家族成员梳理

ARM公司简介 ARM是Advanced RISC Machines的缩写&#xff0c;它是一家微处理器行业的知名企业&#xff0c;该企业设计了大量高性能、廉价、耗能低的RISC &#xff08;精简指令集&#xff09;处理器。 1985年第一个ARM原型在英国剑桥诞生。 公司的特点是只设计芯片&#xff0c…
阅读更多...
z-index ie无效

z-index ie无效

首先来个 解释了三个原因&#xff1a;http://www.cnblogs.com/hakuci/archive/2011/01/05/1926212.html 我这个还比较特殊 爸爸级别在最底层 遮羞层在中间 儿子最外边 <div>遮羞层</div> z-index2 <div>爷爷 <div>小爸爸</div> <div>爸…
阅读更多...
数据结构与算法问题 AVL二叉平衡树

数据结构与算法问题 AVL二叉平衡树

AVL树是带有平衡条件的二叉查找树。这个平衡条件必须保持&#xff0c;并且它必须保证树的深度是O&#xff08;logN&#xff09;。 一棵AVL树是其每一个节点的左子树和右子树的高度最多差1的二叉查找树。&#xff08;空树的高度定义为-1&#xff09;。在插入以后。仅仅有那些从插…
阅读更多...
tomcat源码阅读之StandardHost和StandardEngine

tomcat源码阅读之StandardHost和StandardEngine

StandardHost及UML类图&#xff1a; 1、StandardHost类是Host接口的默认实现&#xff1b;其继承自ContainerBase类&#xff0c;说明他也是一个容器类&#xff0c;既然是容器类&#xff0c;那肯定也有管道对象PipeLine和阀门&#xff0c;其基础阀门&#xff08;Basic Valve&…
阅读更多...
安防监控产业链全景梳理

安防监控产业链全景梳理

安防行业是随着现代社会安全需求应运而生的产业&#xff0c;围绕着视频监控技术的改革创新&#xff0c;行业从“看得见、看得远、看得清到看得懂”&#xff0c;一共经历模拟监控、数字监控、网络高清监控和智能监控4个阶段&#xff0c;每一阶段的突破&#xff0c;都由上游技术的…
阅读更多...
Vue项目搭建步骤

Vue项目搭建步骤

一&#xff0e; vue-cli初始化1. 全局安装 vue-cli　　npm install --global vue-cli2. 创建一个基于 webpack 模板的新项目　　vue init webpack my-project3. 安装依赖　　cd my-project　　npm install (换源安装: npm install --registry https://registry.npm.taobao.org …
阅读更多...
Python tutor 简介

Python tutor 简介

Python tutor 能够直观显示object 引用关系。 网址是 http://www.pythontutor.com/visualize.html 先分享一下我的一个Python tutor&#xff1a; 点我出现神奇&#xff1a; 1&#xff09; 编辑code。 2&#xff09; 运行&#xff0c; 能够看到以下界面。 这个工具是很酷的&…
阅读更多...
提高CSS性能

提高CSS性能

1、选择器 了解CSS的查找匹配原理&#xff0c;让CSS更简洁、高效使用高效率的CSS选择器如何使CSS渲染更高效 总结 不要在ID选择器前使用标签名 一般写法&#xff1a;div#divBox 更好写法&#xff1a;#divBox 解释&#xff1a; 因为ID选择器是唯一的&#xff0c;加上div反而增加…
阅读更多...
光学镜头行业发展现状及趋势，智能手机应用领域占比最高

光学镜头行业发展现状及趋势，智能手机应用领域占比最高

一、光学镜头分类 光学镜头也叫摄像镜头或摄影镜头&#xff0c;简称镜头&#xff0c;其功能就是光学成像。光学镜头是光学成像系统中的必备组件&#xff0c;直接影响到成像质量的好坏&#xff0c;影响算法的实现和效果。从结构来看&#xff0c;光学镜头一般由精密五金、塑胶零…
阅读更多...
最新文章

Copyright @ 2022~2023