网页中图片预加载的原理
2015-07-08 16:45
253 查看
其实我并不清楚图片预加载的原理,只是一些猜测。
网上介绍的图片预加载,基本上都在说javascript中应该怎么样怎么样,new一个Image()对象。
但是,老大,预加载的目的,归根到底,还是要将这个图片显示出来。你javascript里面的这个Image对象,要怎么样才能让网页的img标签显示出来呢?
没说,好像都没说。
在HTML标签IMG里,src属性可以指向一个web服务,这是人所共知的。问题是,它能指向js的那个Image对象吗?未闻也。
从网上一些示例看,我猜是这样的:
javascript代码:
html:
就是这样,首先在JS里面进行预加载,然后html里的img就能自然而然地用上了这个预加载!
如果真的是这样的话,控制这一切的,是浏览器,它统一协调了JS和HTML。
利用JS对图片进行加载,有时会比较方便,比如设置图片加载完毕以后,触发一些啥东东;或通过Image对象,获得图片的width、height属性,等等。
网上介绍的图片预加载,基本上都在说javascript中应该怎么样怎么样,new一个Image()对象。
但是,老大,预加载的目的,归根到底,还是要将这个图片显示出来。你javascript里面的这个Image对象,要怎么样才能让网页的img标签显示出来呢?
没说,好像都没说。
在HTML标签IMG里,src属性可以指向一个web服务,这是人所共知的。问题是,它能指向js的那个Image对象吗?未闻也。
从网上一些示例看,我猜是这样的:
javascript代码:
var img = new Image(); img.src = "图片路径";//将图片加载到JS对象img里
html:
<!-- html里的img标签,其src与js的Image对象一致,图片的预加载就能派上用场! --> <img id="img1" src="图片路径,与js的Image对象的src一致" alt="左直拳艳照门" />
就是这样,首先在JS里面进行预加载,然后html里的img就能自然而然地用上了这个预加载!
如果真的是这样的话,控制这一切的,是浏览器,它统一协调了JS和HTML。
利用JS对图片进行加载,有时会比较方便,比如设置图片加载完毕以后,触发一些啥东东;或通过Image对象,获得图片的width、height属性,等等。
function preloadImg(url) { var img = new Image(); img.src = url; if(img.complete) {//如果有缓存 //接下来可以使用图片了 //do something here } else { img.onload = function() { img.onload = null; //接下来可以使用图片了 //do something here }; } }
相关文章推荐
- Eclipse中的全局搜索
- 在C#应用程序中,利用表值参数过滤重复,批量向数据库导入数据,并且返回重复数据
- 公鸡3元每只,母鸡5元每只,小鸡1元3只,一百元钱买一百只鸡,请用伪代码写出求公鸡,母鸡和小鸡的数目
- 从另一服务器传输文件到本服务器(服务器间传输文件)
- chrome启用 NPAPI [转]
- 网页中图片预加载的原理
- JAVA_SE基础——12.运算符的优先级
- arm-2009q1-203-arm-none-linux-gnueabi 安装
- 【转播公告】
- Mongo库表操作命令
- MongoDB安装和简介
- 范数、奇异值
- 有1~5000一组乱序数列,请使用伪代码对该数进行排列
- The way it is connected with wristwatches connected with almost any bunch of Diesel-engined is unique
- C++学习笔记 extern C
- 奇怪的分组(stone)
- 【教程】BeautifulSoup中使用正则表达式去搜索多种可能的关键字
- 实施项目--为什么开发人员一直在抱怨需求变动
- MySQl Study学习之--MySQl二进制日志管理
- web.py 十分钟创建简易博客