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

2014-04-25  来源:本站原创  分类:javascript技巧  人气:3 

由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小,所以lightbox类效果为了让图片居中显示,导致其速度体验要比直接输出的差很多。

而本文所提到的预加载技术主要是让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(img.width, img.height);
img.onload = null;
};
};
};

可以看到使用onload的方式必须等待图片加载完毕,其速度不敢恭维。
web应用程序区别于桌面应用程序,响应速度才是最好的用户体验。如果想要速度与优雅兼得,那就必须提前获得图片尺寸,如何在图片没有加载完毕就能获取图片尺寸?
十多年的上网经验告诉我:浏览器在加载图片的时候你会看到图片会先占用一块地然后才慢慢加载完毕,并且这里大部分的图片都是没有预设width与height属性的,因为浏览器能够获取图片的头部数据。基于此,只需要使用javascript定时侦测图片的尺寸状态便可得知图片尺寸就绪的状态。
实现代码(2011-03-11更新):
2011-03-12 更新:
只使用一定时器,优化性能


http://demo.jb51.net/js/2011/imgready/
(通过测试的浏览器:Chrome、Firefox、Safari、Opera、IE6、IE7、IE8)
来自:: 唐斌

相关文章
  • 再谈javascript图片预加载技术(详细演示) 2014-04-25

    由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小,所以lightbox类效果为了让图片居中显示,导致其速度体验要比直接输出的差很多. 而本文所提到的预加载技术主要是让javascript快速获取图片头部数据的尺寸. 一段典型的使用预加载获取图片大小的例子: var imgLoad = function (url, callback) { var img = new Image(); img.src = url; if (img.complete) { ca

  • javascript简单实现图片预加载 2014-11-24

    本文是给大家分享一段简单的实现图片预加载技术的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]; }

  • 纯JS图片批量预加载技术代码 2015-03-24

    一款实用的图片预加载技术,真正实现加载完成显示图片,加载过程中显示进度指示,本加载可以批量进行,将成批图片加载完成才显示,使用循环依次载入图片,并将路径暂存在数组中,加载完成后取出数组数据并显示. 图片批量加载 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 实现图片预加载的三大方法及优缺点分析 2014-12-28

    本文介绍了实现图片预加载的三大方法(CSS/JAVASCRIPT/AJAX)以及这三种方法的优缺点分析,是篇非常值得推荐的文章,小伙伴们可要仔细研究下. 预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 方法一:用CSS和JavaScri

  • JS图片预加载 JS实现图片预加载应用 2014-10-24

    由于图片加载慢,导致用户体验特别差,本文将介绍一种图片预加载技术,需要了解的朋友可以参考下 <!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"> &

  • 利用CSS.JavaScript及Ajax实现高效的图片预加载 2015-02-24

    图片预加载想必大家都不陌生吧,实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效 方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效. 单纯使用CSS,可容易.高效地预加载图片,代码如下: #preload-01 { background: url(http://domain.

  • javascript图片浏览器的核心--图片预加载 2015-02-10

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

  • 利用CSS.JavaScript及Ajax实现图片预加载的三大方法 2014-09-04

    发表于2013-10-15 16:17| 来源Perishable Press| 作者Perishable Press 摘要:图片的加载速度往往影响着网站整体的用户体验,尤其对于包含大量图片的网站.对图片进行预加载,不失为一个高效的解决方案.如何实现预加载?本文将例举利用CSS.JavaScript及Ajax实现图片预加载的三大方法. Perishable Press网站近日发表了一篇文章<3 Ways to Preload Images with CSS, JavaScript, or Aja

  • javascript 也来玩玩图片预加载 2014-05-01

    作者:编程浪子 最近玩图片预加载的人好像特别多,我也来一个,个人比较懒,只在IE上调试,大家就当无聊聊玩玩吧 IE图片预加载类 图片加载中... [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • Jquery实现图片预加载与延时加载的方法 2014-09-15

    这篇文章主要介绍了Jquery实现图片预加载与延时加载的方法,分别介绍了原生javascript与jQuery插件实现图片的预加载及延迟加载的方法,具有一定的参考借鉴价值,需要的朋友可以参考下 本文实例讲述了Jquery实现图片预加载与延时加载的方法.分享给大家供大家参考.具体分析如下: 有很多项目经常会需要判断图片加载完成后执行相应的操作,或者需要图片延迟加载,网上虽然已经有很不错的插件,但要为这些效果还得单独加载一个插件的话总感觉有点不舒服,干脆自己写了个方法: function loadi

  • JS实现图片预加载无需等待 2015-01-13

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

  • 图片预加载和延时加载 2013-11-29

    预加载,就是需要用之前就把图片缓存起来. 应用场景:图片浏览器,某些隐藏的图片显示或者是新增dom节点里面的图片. 实现方式:1,采用Image对象提前缓存图片,代码如下: function loadImage(url, callback) { var img = new Image(); //创建一个Image对象,实现图片的预下载 img.src = url; if (img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数 callback.call(img);

  • 图片预加载效果的实现 2014-08-23

    使用picasa的时候,注意到它首先是显示模糊的图片,然后图片突然变得清晰,这样做有一定的好处--picasa的图片翻页是用javascript实现的,如果直接载入大图,中间势必会有个空档,用户在这中间会感觉很空虚~~ 于是我花了点时间,打探它的实现方式,发觉很简单,不是用的lowsrc之类的标记,而是简单的js. 代码示例 PLAIN TEXT CODE: <img id="myImage" src="small_144.jpg" width="6

  • html+js实现图片预加载,lightbox底层原理. 2014-11-02

    在前端设计时,为了让某县页面的图片即使缓存到浏览器中,一般使用预加载技术,但更为确切的应该称为异步加载,因为对线程不会造成阻塞. 图片是网站开发部分中的静态资源,当浏览器网络请求到图片时会首先缓存,然后根据url hash值载入到<img>中 相关链接 Http Status 304响应状态的资源更新机制 核心代码 <script type="text/javascript"> function loadImage(id,src,callback) { var

  • jQuery简单实现图片预加载 2013-11-12

    我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题呢?下面我来介绍一种在实际应用中经常会使用到的js预加载的方法. jQuery实现图片预加载 JS代码 $(function(){ loadImg("http://d.hiphotos.baidu.com/image/pic/item/fd039245d688d43f14f69eff7f1ed21b0ef43b5b.jpg",addImg); func

  • jquery 图片预加载 自动等比例缩放插件 2014-03-24

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

  • jQuery图片预加载 等比缩放实现代码 2014-07-20

    jQuery图片预加载 等比缩放实现代码,需要的朋友可以参考下. /* * Image preload and auto zoom * scaling 是否等比例自动缩放 * width 图片最大高 * height 图片最大宽 * loadpic 加载中的图片路径 * example $("*").LoadImage(true,w,h); */ jQuery.fn.LoadImage=function(scaling,width,height,loadpic){ if(loadpic

  • 巧妙使用CSS2做图片预加载 2014-04-01

    CSS 创建content 在CSS2中介绍了一个叫做content的属性,它连同 :before和 :after这两个伪类使用,可以让我们在文档上创建容器.最有趣的content应用是它允许使用url()来调用一个图像: DaimaRen.cn © 2009-2010 by Tomie Zhang 1 content: url(img01.jpg); 这可以让我们预加载一张图片,那么多个图片呢?下面这个展示了content的强大,它可以允许放置多个url: DaimaRen.cn © 2009

  • 几个使用jQuery的图片预加载函数 2013-10-12

    最近项目中用到的一个功能,用户进入网站时显示loading页面,直到主页的几个大图片加载完成才渐隐进入主页.自己写了个插件,看起来结构挺糟糕的,不好意思放到项目里.在网上搜现成的,还挺多.不过得用英文关键词,搜中文的真是垃圾网站一大堆.废话完毕下面开始 第一个 1 2 3 4 5 6 7 8 9 10 11 12 (function($) { varcache = []; // Arguments are image paths relative to the current page. $.p

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

    通过js操纵DOM很多情况下都是为了实现和当前页html元素的异步载入,我谈谈对Image对象的一些认识. 看个例子: <input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" /> <script type="text/javascript"> <!-- function addImg(isrc)