`
likeenicee
  • 浏览: 8608 次
  • 性别: Icon_minigender_1
  • 来自: 暗暗的
社区版块
存档分类
最新评论

[转]javascript图片浏览器的核心——图片预加载

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

知道了一张图片的地址,需要把它在一个固定大小的html容器(可以是div等)里边显示出来,最重要的当然是需要知道这张即将显示的图片的宽和高,然后再结合容器的宽和高,按照一定的缩放比例使图片显示出来。因此,实现图片预加载就成为图片浏览器的核心功能了。

做过图片翻转效果的朋友其实都知道,要让图片轮换的时候不出现等待,最好是先让图片下载到本地,让浏览器缓存起来。这时,一般都会用到js里边的Image对象。一般的手段无非这样:

function preLoadImg(url) {
  var img = new Image();
  img.src = url;
}
通过调用preLoadImg函数,传入图片的url,就能使图片预先下载下来了。实际上,这里用到的预下载功能也和这基本一致。图片预下载下来后,通过 img的width和height属性,就能知道图片的宽和高了。但是需要考虑到,在做图片浏览器功能时,图片都是实时显示的。比如你点了显示的按钮,这个时候才会调用上边类似的代码来加载图片。因此,如果你直接用img.width的时候,图片还没有完全下载下来。因此,需要用一些异步的方法,等到图片下载完毕的时候才会再对img的width和height进行调用。

实现这样的异步方法实际上不难,图片的下载完毕事件也很简单,就是简单的onload事件。因此,我们可以写出下面的代码:

function loadImage(url, callback) {
  var img = new Image();
  img.src = url;

  img.onload = function(){ //图片下载完毕时异步调用callback函数。
    callback.call(img);   // 将callback函数this指针切换为img。
  };
}

好了,再来写一个测试用例。

function imgLoaded(){
  alert(this.width);
}
<input type="button" value="loadImage" onclick="loadImage('aaa.jpg',imgLoaded)"/>

在firefox中测试一下,发现不错,果然和预想的效果一样,在图片下载后,就会弹出图片的宽度来。无论点击多少次或者刷新结果都一样。

不过,做到这一步,先别高兴太早——还需要考虑一下浏览器的兼容性,于是,赶紧到ie里边测试一下。没错,同样弹出了图片的宽度。但是,再点击load的时候,情况就不一样了,什么反应都没有了。刷新一下,也同样如此。

经过对多个浏览器版本的测试,发现ie6、opera都会这样,而firefox和safari则表现正常。其实,原因也挺简单的,就是因为浏览器的缓存了。当图片加载过一次以后,如果再有对该图片的请求时,由于浏览器已经缓存住这张图片了,不会再发起一次新的请求,而是直接从缓存中加载过来。对于 firefox和safari,它们视图使这两种加载方式对用户透明,同样会引起图片的onload事件,而ie和opera则忽略了这种同一性,不会引起图片的onload事件,因此上边的代码在它们里边不能得以实现效果。

怎么办呢?最好的情况是Image可以有一个状态值表明它是否已经载入成功了。从缓存加载的时候,因为不需要等待,这个状态值就直接是表明已经下载了,而从http请求加载时,因为需要等待下载,这个值显示为未完成。这样的话,就可以搞定了。

经过一些分析,终于发现一个为各个浏览器所兼容的Image的属性——complete。所以,在图片onload事件之前先对这个值做一下判断即可。最后,代码变成如下的样子:

function loadImage(url, callback) {
    var img = new Image(); //创建一个Image对象,实现图片的预下载
    img.src = url;
  
    if (img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数
        callback.call(img);
        return; // 直接返回,不用再处理onload事件
    }

    img.onload = function () { //图片下载完毕时异步调用callback函数。
        callback.call(img);//将回调函数的this替换为Image对象
    };
};
经过这么一番折腾,总算是让各个浏览器都能满足我们的目标了。虽然代码很简单,但是却把图片浏览器中最核心的问题解决掉了,接下来你所要做的,仅仅是图片如何呈现的问题了。
分享到:
评论

相关推荐

    js 利用image对象实现图片的预加载提高访问速度

    一些浏览器试图通过在本地缓存中保存这些图片来解决此问题。这样一来可以顺序调用这些图片——但对于首次使用这些图片的时候仍然会存在延时。预装载就是一种在需要图片之前就将图片下载到缓存的技术。采用这样的...

    JavaScript详解(第2版)

     12.3.2 预加载图片和Image()构造函数   12.3.3 随机显示图片和onClick事件   12.3.4 图片地图与JavaScript   12.4 缩放图片以适应窗口   12.5 幻灯简介   12.5.1 带有控制按钮的简单幻灯展示   ...

    blog:想更多!了解更多!

    personal blog 合抱之木,生于毫末;...Intersection Observer + Vue指令 优雅实现图片懒加载 【性能优化】图片优化——总览 事件循环机制 Event-Loop及其延伸 深入了解HTTP/2的前世今生以及Web性能优化总结

    【卷一/共两卷】AJAX实战pdf高清版90M

    13.3.2 Aiax预加载功能 13.4 增加丰富的渐变效果 13.4.1 跨浏览器的不透明规则 13.4.2 实现淡入/淡出渐变 13.4.3 集成JavaScript定时器 13.5 附加功能 13.5.1 插入额外提要 13.5.2 集成跳过和暂停功能 13.6 避免项目...

    精通AngularJS part1

    组合使用不同的预加载技术327 122优化首页327 避免显示未经处理的模板328 使用ng—cloak指令隐藏DOM元素328 使用ng—bind指令隐藏表达式329 引入AngularJS和应用脚本文件330 引用脚本文件330 AngularJS和异步...

    单页面和多页面开发及应用

    首屏数据渐进式预加载的优化思路也得到了体现: 优化首屏数据加载节点的速度。 预先加载首屏数据,使得多个串行节点并行化。 -SEO问题,不利于百度,360等搜索引擎收录。 解决办法:可以采用prerender服务,它拿到...

    JAVA上百实例源码以及开源项目源代码

     util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码...

    JAVA上百实例源码以及开源项目

     util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码...

    express-seed:我的 express.js 应用种子

    全局变量有时是个好主意——从 190 倍到现在,我们都在浏览器中使用全局变量,我看不出它们最终坏的原因 要求目录中的所有文件是个好主意——我不想最终手动要求大型代码库中的每个文件 我认为 rethinkdb 是有史...

    jquery插件使用方法大全

    要等到页面全部加载完毕才执行,注意是全部加载,包括dom,图片等其它资源。 而$(document).ready(function(){ alert&#40;"hello"&#41;; });(1) 当dom加载完就可以执行了。 代码1同时做到表现和逻辑分离。并且可以在...

Global site tag (gtag.js) - Google Analytics