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 相关文章推荐
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
理解Javascript图片预加载
Feb 23 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
JavaScript从原型到原型链深入理解
Jun 03 Javascript
用jQuery实现抽奖程序
Apr 12 jQuery
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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
mailto的使用技巧分享
2012/12/21 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
2013/04/23 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
JavaScript正则表达式之multiline属性的应用
2015/06/16 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
React实现全选功能
2020/08/25 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
Python文件的读写和异常代码示例
2017/10/31 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
python模块之paramiko实例代码
2018/01/31 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
爱国教育主题班会
2015/08/14 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python