图片预加载效果的实现

作者:volcano 来源:某人的栖息地 时间:2008-06-16 12:08:00 

使用picasa的时候,注意到它首先是显示模糊的图片,然后图片突然变得清晰,这样做有一定的好处——picasa的图片翻页是用javascript实现的,如果直接载入大图,中间势必会有个空档,用户在这中间会感觉很空虚~~

于是我花了点时间,打探它的实现方式,发觉很简单,不是用的lowsrc之类的标记,而是简单的js。好用的JS图片预加载类

代码示例

<img id="myImage" src="small_144.jpg" width="640" />
var img = new Image();
img.src = "http://imghost/big_640_480.jpg";
img.onload = function() {
  document.myImage.src = this.src;

如此这般,待大图载入完成之后,利用js替换原小图的src,就完成了图片预加载效果。关键点是图片的onload事件利用。

标签:加载,图片,javascript
0
投稿

猜你喜欢

  • Python动态生成多维数组的方法示例

    2023-07-19 04:12:03
  • SQL Server日志文件总结及日志满的处理

    2009-03-25 16:17:00
  • 为SWFUpload增加ASP版本的上传处理程序

    2011-04-28 08:01:00
  • Python基础知识方法重写+文件处理+异常处理

    2022-09-20 06:43:43
  • Python模拟脉冲星伪信号频率实例代码

    2023-02-12 06:01:08
  • web标准页面知识必备 Ⅰ

    2008-03-06 13:24:00
  • 开心网上input输入框研究

    2009-03-06 12:52:00
  • Oracle SecureFile的功能第1/4页

    2009-06-19 18:07:00
  • python类共享变量操作

    2021-10-21 02:16:32
  • Python之字典对象的几种创建方法

    2023-04-28 13:15:57
  • 存储过程优缺点分析

    2024-01-22 09:41:14
  • Python+PyQt5自制监控小工具

    2023-09-14 10:52:31
  • CSS结合js实现动态更换皮肤

    2007-07-14 10:01:00
  • Python实现名片管理系统

    2022-01-11 21:45:12
  • oracle 常用的几个SQL

    2009-12-01 12:36:00
  • Python 切片为什么不会索引越界?

    2022-02-22 19:39:47
  • python TF-IDF算法实现文本关键词提取

    2022-10-08 16:06:25
  • HTTP缓存之ETag使用经验及效果

    2023-10-08 22:36:04
  • Golang中接收者方法语法糖的使用方法详解

    2024-05-21 10:26:49
  • DjangoRestFramework 使用 simpleJWT 登陆认证完整记录

    2021-03-29 18:34:12
  • asp之家 网络编程 m.aspxhome.com