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

自由风qin

自由风qin

2016-02-19 10:08

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享JavaScript进阶教程(第四课第一部分),希望可以对大家能有小小的帮助。
在以前的课程中,我们学习了对文本和字符串的各种操作,今天我们专注于两种不同的数据类型:图象和对象。学完这一课,你将知道如何: 
    使用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属性中。
    不很难吧?图象对象相当有用对吧?我很高兴你这样想,休息一会儿,马上我们就要进入一个更令人兴奋,更让人动脑筋的话题:创建你自己的对象。
展开更多 50%)
分享

猜你喜欢

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

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

AJAX开发简略 (第一部分)

Web开发
AJAX开发简略 (第一部分)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

javascript编程起步(第四课)

Web开发
javascript编程起步(第四课)

VBScript教程 第四课

ASP
VBScript教程 第四课

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

经典搜索案例1001 第一部分:基础篇

电脑网络
经典搜索案例1001 第一部分:基础篇

一个 C++ 日期类(第一部分)

C语言教程 C语言函数
一个 C++ 日期类(第一部分)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

ajax回调函数参数传递正确方法

ajax回调函数参数传递正确方法

Windows 8.1无缝集成新设备协议API

Windows 8.1无缝集成新设备协议API
下拉加载更多内容 ↓