JavaScript进阶教程(第四课第一部分)


Posted in Javascript onApril 05, 2007

在以前的课程中,我们学习了对文本和字符串的各种操作,今天我们专注于两种不同的数据类型:图象和对象。学完这一课,你将知道如何: 
    使用JavaScript来加速图象交换。 
    创建你自己的对象来使脚本易于理解。 
    使用关联数组来快速存取脚本中的每一个对象。
    使用JavaScript做图象变换的一个主要问题是,它直到需要换图时才去告诉浏览器下载那张图象。如果你有一张大的图象,想在鼠标滑过一副图象时调出来,浏览器得临时下载这张图,这可能会花一定时间从而使滑动效果大打折扣。
    如果你的连接速度较慢,而你要调入的是一个相当大的图象的话,那你把鼠标放到图上后只好去等待。由于有的浏览器要求被调入的图象必须保存在缓冲区里,所以有时你可能根本就看不到图象变换的效果。为了避免这些烦心的问题,我们可以把要变换的图象在页面调入时就预先装载。
    在Web编程时,预装载是在需要图片之前就将图片下载到缓存的技术。采用这样的方式可以使当确实需要显示图片时迅速将其从缓存中恢复回来并立即显示。
    预装载图象其实并不困难。你要做的就是创建一个新的image对象,然后把要预装的图象名设定成image的src属性,如下所示:
    var an_image = new Image();
    an_image.src = "my_nice_image.gif";
    通过设置image的src属性就可以自动地把图象下载到你的硬盘里(当然假设你的cache可以用),然后图象变换时就从硬盘直接读入图象而不用再去下载了。 
    剩下要做的唯一一件事就是,怎样在页面被下载以后和图象变换操作之前使预装图象发生。让人愉快的是这很简单。HTML中的body标记有一个事件处理器叫onLoad,当页面被调入后它将被调用。如果你的body标记是这样的:
    <body onLoad="doPreload();">
    那么doPreload()函数将在网页下载后被调用。函数的代码是这样的: 
    function doPreload()
    {
        var the_images = new Array(’kwmatt.jpg’,’matbon.jpg’,’lunchMat.jpg’);
        preloadImages(the_images);
    }
    function preloadImages(the_images_array) {
        for(loop = 0; loop < the_images_array.length; loop++)
        {
            var an_image = new Image();
            an_image.src = the_images_array[loop];
        }
    }
    doPreload()函数创建了需要预装的图象名的数组,并把数组作为参数传送到preloadImages()函数, preloadImages()函数包含了一个循环,每次循环都创建一个新的图象对象,并把图象名设到它的src属性中。
    不很难吧?图象对象相当有用对吧?我很高兴你这样想,休息一会儿,马上我们就要进入一个更令人兴奋,更让人动脑筋的话题:创建你自己的对象。

Javascript 相关文章推荐
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
JavaScript ES6 Class类实现原理详解
May 08 Javascript
vue 清空input标签 中file的值操作
Jul 21 Javascript
JavaScript 指导方针
Apr 05 #Javascript
JavaScript 特殊字符
Apr 05 #Javascript
JavaScript 中的事件教程
Apr 05 #Javascript
JavaScript While 循环基础教程
Apr 05 #Javascript
脚本之家贴图转换+转贴工具用到的js代码超级推荐
Apr 05 #Javascript
javascript判断单选框或复选框是否选中方法集锦
Apr 04 #Javascript
javascript中巧用“闭包”实现程序的暂停执行功能
Apr 04 #Javascript
You might like
十天学会php(1)
2006/10/09 PHP
将OICQ数据转成MYSQL数据
2006/10/09 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
php header函数的常用http头设置
2015/06/25 PHP
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
js创建元素(节点)示例
2014/01/02 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
python实现dict版图遍历示例
2014/02/19 Python
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
zookeeper python接口实例详解
2018/01/18 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
戴森西班牙官网:Dyson西班牙
2020/02/04 全球购物
this关键字的含义
2015/04/08 面试题
居委会四风问题个人对照检查材料
2014/09/25 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
情况说明书怎么写
2015/10/08 职场文书
电力培训学习心得体会
2016/01/11 职场文书
一文搞懂MySQL索引页结构
2022/02/28 MySQL
JavaScript中10个Reduce常用场景技巧
2022/06/21 Javascript