图片预加载
2017-12-21 13:59
127 查看
我之前只会图片的懒加载 由于工作需要 学会了图片预加载
网上介绍的图片预加载,基本上都在说javascript中应该怎么样怎么样,new一个Image()对象。
但是,老大,预加载的目的,归根到底,还是要将这个图片显示出来。你javascript里面的这个Image对象,要怎么样才能让网页的img标签显示出来呢?
没说,好像都没说。
在HTML标签IMG里,src属性可以指向一个web服务,这是人所共知的。问题是,它能指向js的那个Image对象吗?未闻也。
从网上一些示例看,我猜是这样的:
首先在JS里面进行预加载,然后html里的img就能自然而然地用上了这个预加载
控制这一切的,是浏览器,它统一协调了JS和HTML
利用JS对图片进行加载,有时会比较方便,比如设置图片加载完毕以后,触发一些啥东东;或通过Image对象,获得图片的width、height属性,等等。
网上介绍的图片预加载,基本上都在说javascript中应该怎么样怎么样,new一个Image()对象。
但是,老大,预加载的目的,归根到底,还是要将这个图片显示出来。你javascript里面的这个Image对象,要怎么样才能让网页的img标签显示出来呢?
没说,好像都没说。
在HTML标签IMG里,src属性可以指向一个web服务,这是人所共知的。问题是,它能指向js的那个Image对象吗?未闻也。
从网上一些示例看,我猜是这样的:
var img = new Image(); img.src = "图片路径";//将图片加载到JS对象img里
<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 }; } }
相关文章推荐
- jQuery实现图片延迟加载
- RecyclerView的通用适配器,和滚动时不加载图片的封装
- 分享一个轻量级图片加载类 ImageLoader
- Vue图片懒加载之lazyload插件使用
- android项目源码异步加载远程图片的小例子
- jQuery Lazy Load 图片延迟加载
- Android Volley完全解析(二),使用Volley加载网络图片
- Android ListView 图片异步加载和图片内存缓存
- 高效加载单个大图片——OOM
- WordPress主题 Tob 自适应响应式小清新无限加载图片主题[更新v0.3]
- 浅谈Volley加载不出图片的问题
- Android ListView 图片异步加载和图片内存缓存
- Android图片加载框架之Google推荐的图片加载库Glide
- 用Bitmap加载图片资源时,报错java.lang.OutOfMemoryError: bitmap size exceeds VM budget的解决办法
- ListView 加载图片错乱问题
- BFILENAME加载图片示例
- Pivasso 加载网络图片 缓存地址
- android 加载图片方式
- Listview异步加载图片之优化篇
- 关于异步加载、缓存图片、软引用等