jQuery实现预加载图片的方法_H5之家 - 中国HTML5教程资源分享第一站

jQuery实现预加载图片的方法

2015-11-18 15:55　|　78人阅读　|　来源

本文实例讲述了jQuery实现预加载图片的方法。分享给大家供大家参考。具体分析如下：

这段js代码用于预加载图片，记住是预加载，不是后加载哟，就是在图片还不显示的时候就将图片下载到用户浏览器的缓存中，这样要显示的时候就非常快，无需再到服务器上去读取图片。

jQuery.preloadImages = function() { 　　for(var i = 0; i < arguments.length; i++) { 　　　　$("<img />").attr('src', arguments); 　　} }; //用法 $.preloadImages('image1.gif','/path/to/image2.png','some/image3.jpg');

希望本文所述对大家的jQuery程序设计有所帮助。

相关推荐

利用CSS、JavaScript及Ajax实现高效的图片预加载

方法一：用CSS和JavaScript实现预加载实现预加载图片有很多方法，包括使用CSS、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的解决方案，十分高效。单纯使用CSS，可容易、高效地预加载图片，代码如下：代码如下: #preload-01 { background: url() no-re

用javascript预加载图片、css、js的方法研究

预加载的好处可以让网页更快的呈现给用户，缺点就是可能会增加无用的请求（但图片、css、js这些静态文件可以被缓存），如果用户访问的页面里面的css、js、图片被预加载了，用户打开页面的速度会快很多，提升用户体验。在用到一些大图片展示的时候，预加载大图是很不错的方法，图片更快的被呈现给用户。不多说了，作为一个前端攻城师都懂的，下面分享我做的测试和得到的结果。先说需要知道的服务器返回的statu

javascript预加载图片、css、js的方法示例介绍

js 判断图片是否加载完以及实现图片的预下载

创建一个Image对象，实现图片的预下载，如果图片已经存在于浏览器缓存，直接调用回调函数，使用onload事件可以判断图片是否加载完成 function loadImage(url, callback) { var img = new Image(); //创建一个Image对象，实现图片的预下载 img.src = url; if(img.complete) { // 如果图片已经存在于浏览

jQuery图片预加载等比缩放实现代码

代码如下: /* * Image preload and auto zoom * scaling 是否等比例自动缩放 * width 图片最大高 * height 图片最大宽 * loadpic 加载中的图片路径 * example $("*").LoadImage(true,w,h); */ jQuery.fn.LoadImage=function(scaling,wid

jquery 图片预加载自动等比例缩放插件

代码如下: /* **************图片预加载插件****************** ///作者：没剑(2008-06-23) ///http://regedit.cnblogs.com ///说明：在图片加载前显示一个加载标志，当图片下载完毕后显示图片出来可对图片进行是否自动缩放功能此插件使用时可让页面先加载，而图片后加载的方式，解决了平时使用时要在图片显示出来后才能进行

JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载

JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载以前对于JavaScript总是在用到的时候在页面上写几个函数，基本没考虑到函数的封装与重用，最近有个项目可能对于这方面要求有点高，所以就研究了下类似jQuery的封装。这里就图片等比缩放以及预加载的效果来尝试下，写写类似的JavaScript代码。图片等比缩放以及预加载的效果如下(预加载效果有时候会不是很明显)：

js图片预加载示例

js图片预加载简单示例代码如下: function loadImage(url, callback) { if(url!='null') { var img = new Image();

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

网站开发时经常需要在某个页面需要实现对大量图片的浏览，如果考虑流量的话，大可以像pconline一样每个页面只显示一张图片，让用户每看一张图片就需要重新下载一下整个页面。不过，在web2.0时代，更多人愿意用javascript来实现一个图片浏览器，让用户无需等待过长的时间就能看到其他图片。知道了一张图片的地址，需要把它在一个固定大小的html容器（可以是div等）里边显示出来，最重要的当然是需

关于图片的预加载过程中隐藏未知的

看完了曼联与曼城的同城德比，还有漫长的两个小时，才能看到期待中的国家德比。无聊的很，左右无事，便来论坛闲逛。看到了一章关于图片预加载的博文，其代码如下：代码如下: function loadImage(url, callback) { var img = new Image(); //创建一个Image对象，实现图片的预下载 img.src = url; if (img.complet

javascript 也来玩玩图片预加载

作者：编程浪子最近玩图片预加载的人好像特别多，我也来一个，个人比较懒，只在IE上调试，大家就当无聊聊玩玩吧 <html> <head> <title>IE图片预加载类</title> <script language="javascript"> function LoadImageClass() {

再谈javascript图片预加载技术(详细演示)

而本文所提到的预加载技术主要是让javascript快速获取图片头部数据的尺寸。一段典型的使用预加载获取图片大小的例子：代码如下: var imgLoad = function (url, callback) { var img = new Image(); img.src = url; if (img.complete) { callback(img.width, img.hei

基于jquery的lazy loader插件实现图片的延迟加载[简单使用]

通过使用jquery的lazy loader插件可以实现图片的延迟加载，当网页比较长的时候，会先只加载用户视窗内的图片，视窗外的图片会等到你拖动滚动条至后面才加载，这样有效的避免了因图片过多而加载慢的弊端。　　使用lazy loader插件很简单，只要在页面中引入lazy loader插件，然后为页面上的图片调用延迟加载方法就可以了。lazy loader插件的下载地址：

使用 SVG 实现一个漂亮的页面预加载效果