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

2016-02-19 10:08 8 1 收藏

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享JavaScript进阶教程(第四课第一部分),希望可以对大家能有小小的帮助。

【 tulaoshi.com - Web开发 】

在以前的课程中,我们学习了对文本和字符串的各种操作,今天我们专注于两种不同的数据类型:图象和对象。学完这一课,你将知道如何: 
    使用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属性中。
    不很难吧?图象对象相当有用对吧?我很高兴你这样想,休息一会儿,马上我们就要进入一个更令人兴奋,更让人动脑筋的话题:创建你自己的对象。

来源:http://www.tulaoshi.com/n/20160219/1593508.html

延伸阅读
标签: diy手工
近日,网上一组白领自制办公室收纳柜的照片被广泛转发,精致的手工甚至让网友感慨“遇到这样的男子赶快嫁了吧”。记者了解到,这名24岁的“手工帝”从小就是“闲不住的淘气男”,埃菲尔铁塔模型、麻将桌、化妆包、蛐蛐罐……他对亲手制作这些小玩意乐此不疲。同学戏称,他就是靠这股心灵手巧的劲儿才“讨到媳妇”的。 纸柜竟用了“...
标签: 软件教程
本文核心内容:课件共计24张幻灯片,其中前8张展示的是古都洛阳夜晚灯火璀璨的美景,希望通过这些精选的图片培养学生热爱家乡的思想感情,激发起学生学习的欲望和好奇心,体现出从生活走向物理的教育思想。在正式上课前,如何让演示文稿跳出图片的循环,停留到课件的首页呢?本教程通过两种方法来实现:1、拆分作品后设置超级链接2、使用自定义...
标签: PS PS教程
上一课:漫画基础第三课:漫画文字的基本技巧 漫画基础第四课:漫画效果线的基本技巧 [next] [next] 下一课:漫画基础第五课:分镜架构基础技巧之整体与局部
标签: PS 电脑
1、打开一张图片 2、将背景图层复制一层,Ctrl+j或者直接在下方复制。 3、在想要扭曲的部分画出选取,可以用矩形选框工具或者圆形选框工具,或者钢笔工具等等,只要选出自己想要的部分的选区就可以。 4、在选区状态下,滤镜-扭曲-效果可以自己设定,有很多效果可以试试。 相关阅读: photoshop图片处理及美化
标签: flash教程
本文由 中国 sanbos 原创,转载请保留此信息!   本系列Flash教程由中国Flash互助课堂专为Flash新手制作,更多教程和练习请 点击这里 ,在这里有系列的教程、练习,并有老师对练习进行点评与指导,欢迎朋友们的光临! 上一课: Flash新手入门教程:AS入门第三课_AS基本语法 在学习中遇到问题可以到这里提问,老师会给出解...

经验教程

592

收藏

66
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部