0

0

JavaScript进阶教程(第四课第一部分)_基础知识

php中文网

php中文网

发布时间:2016-05-16 19:15:32

|

977人浏览过

|

来源于php中文网

原创

在以前的课程中,我们学习了对文本和字符串的各种操作,今天我们专注于两种不同的数据类型:图象和对象。学完这一课,你将知道如何: 
    使用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标记是这样的:
    


    那么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         {
            var an_image = new Image();
            an_image.src = the_images_array[loop];
        }
    }
    doPreload()函数创建了需要预装的图象名的数组,并把数组作为参数传送到preloadImages()函数, preloadImages()函数包含了一个循环,每次循环都创建一个新的图象对象,并把图象名设到它的src属性中。
    不很难吧?图象对象相当有用对吧?我很高兴你这样想,休息一会儿,马上我们就要进入一个更令人兴奋,更让人动脑筋的话题:创建你自己的对象。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
微信文件过期恢复教程
微信文件过期恢复教程

本专题整合了微信文件过期恢复方法、技巧教程,阅读专题下面的文章了解更多详细内容。

0

2026.02.04

抖音网页版入口与视频观看指南 抖音官网视频在线访问
抖音网页版入口与视频观看指南 抖音官网视频在线访问

本专题汇总了抖音网页版的入口链接、官方登录页面以及视频观看入口,帮助用户快速访问抖音网页版,提供免登录访问方式和直接进入视频播放页面的方法,确保顺利浏览和观看抖音视频。

63

2026.02.04

学习通网页版入口与在线学习指南 学习通官网登录与使用方法
学习通网页版入口与在线学习指南 学习通官网登录与使用方法

本专题详细汇总了学习通网页版入口与登录方法,提供学习通官方网页端入口、学生登录平台、网页版使用指南等内容,帮助用户快速稳定地登录学习通官网,顺利进入学习平台,提升学习效率和体验。

9

2026.02.04

Python Web 框架 Django 深度开发
Python Web 框架 Django 深度开发

本专题系统讲解 Python Django 框架的核心功能与进阶开发技巧,包括 Django 项目结构、数据库模型与迁移、视图与模板渲染、表单与认证管理、RESTful API 开发、Django 中间件与缓存优化、部署与性能调优。通过实战案例,帮助学习者掌握 使用 Django 快速构建功能全面的 Web 应用与全栈开发能力。

9

2026.02.04

Java 流式处理与 Apache Kafka 实战
Java 流式处理与 Apache Kafka 实战

本专题专注讲解 Java 在流式数据处理与消息队列系统中的应用,系统讲解 Apache Kafka 的基础概念、生产者与消费者模型、Kafka Streams 与 KSQL 流式处理框架、实时数据分析与监控,结合实际业务场景,帮助开发者构建 高吞吐量、低延迟的实时数据流管道,实现高效的数据流转与处理。

3

2026.02.04

Golang 容器化与 Docker 实战
Golang 容器化与 Docker 实战

本专题深入讲解 Golang 应用的容器化与 Docker 部署,涵盖 Docker 基础概念、容器构建与镜像管理、Go 应用的 Dockerfile 编写、跨平台容器部署与优化、Docker Compose 和 Kubernetes 部署工具。通过实际案例,帮助学习者掌握 如何将 Golang 应用容器化并实现高效部署与管理,提升系统的可扩展性与运维效率。

3

2026.02.04

全国统一发票查询平台入口合集
全国统一发票查询平台入口合集

本专题整合了全国统一发票查询入口地址合集,阅读专题下面的文章了解更多详细入口。

59

2026.02.03

短剧入口地址汇总
短剧入口地址汇总

本专题整合了短剧app推荐平台,阅读专题下面的文章了解更多详细入口。

110

2026.02.03

植物大战僵尸版本入口地址汇总
植物大战僵尸版本入口地址汇总

本专题整合了植物大战僵尸版本入口地址汇总,前往文章中寻找想要的答案。

56

2026.02.03

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
QQ音乐客户端实战开发(electron)
QQ音乐客户端实战开发(electron)

共27课时 | 8.1万人学习

第二十一期_前端开发
第二十一期_前端开发

共169课时 | 17.1万人学习

JavaScript设计模式完整视频教程
JavaScript设计模式完整视频教程

共60课时 | 12.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号