javascript简单实现图片预加载

简单的图片预加载
reloader.js

代码如下:

var images = new Array();
 
function preloadImages(){
    for (i=0; i < preloadImages.arguments.length; i++){
         images[i] = new Image();
        images[i].src = preloadImages.arguments[i];
    }
}
preloadImages("logo.jpg", "main_bg.jpg", "body_bg.jpg", "header_bg.jpg", "jser.jpg");

具体用法如上，小伙伴们可以发挥你的想象力，自由扩展。

赞 (0)

相关推荐

  • javascript 也来玩玩图片预加载

    作者:编程浪子 最近玩图片预加载的人好像特别多,我也来一个,个人比较懒,只在IE上调试,大家就当无聊聊玩玩吧 IE图片预加载类 function LoadImageClass() { var me = this; var a = []; //图片数组 this.Idx = 0; //已经被加载的图片个数 this.Num = 0; //图片总数 //下载图片 this.LoadImages = function(s) { a = s.split(","); this.Num = a.l

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

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

  • javascript图片预加载实例分析

    本文实例讲述了javascript图片预加载的方法.分享给大家供大家参考.具体如下: lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如filick相册的全屏效果).javascript无法获取img文件头数据,真的是这样吗?本文通过一个巧妙的方法让javascript获取它. 这是大部分人使用预加载获取图片大小的例子: var imgLoad = function (url, callback) { var img = new Image(); i

  • JS图片预加载 JS实现图片预加载应用

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • js图片预加载示例

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

  • 利用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:

  • 理解Javascript图片预加载

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效.

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

    网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考虑流量的话,大可以像pconline一样每个页面只显示一张图片,让用户每看一张图片就需要重新下载一下整个页面.不过,在web2.0时代,更多人愿意用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片. 知道了一张图片的地址,需要把它在一个固定大小的html容器(可以是div等)里边显示出来,最重要的当然是需要知道这张即将显示的图片的宽和高,然后再结合容器的宽和高,按照一定的缩放比例使图片显示出来.因此,实

  • js 实现图片预加载(js操作 Image对象属性complete ，事件onload 异步加载图片)

    看个例子: 复制代码 代码如下: <input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" /> <script type="text/javascript"> <!-- function addImg(isrc) { var Img = new Image(); Img.src = isrc; I

  • javascript简单实现图片预加载

    简单的图片预加载 reloader.js 复制代码 代码如下: var images = new Array();   function preloadImages(){     for (i=0; i < preloadImages.arguments.length; i++){          images[i] = new Image();         images[i].src = preloadImages.arguments[i];     } } preloadImages(

  • jQuery简单实现图片预加载

    jQuery实现图片预加载 JS代码 $(function(){ loadImg("http://d.hiphotos.baidu.com/image/pic/item/fd039245d688d43f14f69eff7f1ed21b0ef43b5b.jpg",addImg); function loadImg(url,callback){ var img = new Image(); img.onload = function(){ img.onload = null; callba

  • 微信小程序实现图片预加载组件

    微信小程序实现图片预加载组件

    网页中的图片预加载 图片预加载对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.我们知道在 Web 页面中实现图片的预加载其实很简单,通常的做法是在 JS 中使用 Image 对象即可,代码大致如下 var image = new Image() image.onload = function() { console.log('图片加载完成') } image.src = 'http://misc.360buyimg.

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

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效.

  • JavaScript模仿Pinterest实现图片预加载功能

    JavaScript模仿Pinterest实现图片预加载功能

    前言 对于Pinterest网站,从前端设计出发的话,我们一定不会忘记我们曾经非常流行的瀑布流布局.但是今天,给大家简要分析下 Pinterest上另外一项非常值得借鉴图片加载细节. 看看下面的截图: 大家可以感觉到图片出来的时候预先绘制轮廓,重点是预制区域的颜色采用与图片较为相似的色彩值,当图片加载完全后,会有种渐入的效果. 其中谷歌的图片搜索也用到了类似效果: 我们称之为这种效果为Color Placeholder [色彩预置],当图片加载的时候,我们优先显示其所在容器的背景颜色(如同很多会

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

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 实现图片预加载可以使用css.JavaScript.Ajax三种方法.下面分别介绍这些方法的实现. 使用CSS 单纯的使用css可以将图片加载到页面元素的背景上,这种方法简单.高效: #d

  • 基于javascript实现图片预加载

    一.定义 预加载图片是提升用户体验的一个好办法,提前加载用户所需的图片,保证图片快速.无缝发布,使用户在浏览器网站时获得更好用户体验.常用于图片画廊等应用中. [注意]若使用即时加载,加载的图片与页面的其他内容一起加载会增加页面的整体加载时间,所以使用window.onload比较合适. 二.两种思路 1.使用背景图像 使用页面无用元素的背景图片预加载 <style> body{ margin: 0; } img{ width: 100px; height: 100px; } ul{ marg

  • javascript图片预加载完整实例

    本文实例讲述了javascript图片预加载的方法.分享给大家供大家参考,具体如下: <!DOCTYPE > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>图片预加载</tit

随机推荐