如何实现图片的预加载,方法总结

原创 xiaolong2122451 随笔 每日一套面试题 971阅读 2018-03-09 09:26:16 举报

1 , 如何实现图片的预加载?请写下你的实现方法。

如果使用jquery的话,jquery有个插件叫:lazyload.js 。它是基于jquery封装的针对图片懒加载的js库。 它的实现原理是使用延时加载。当图片出现在距离可视区多少距离的时候去加载图片。

实现方法:在img上添加data-original属性来存放url.在img添加hegiht和width,或者css添加也行。 保证加载图片以后不会影响页面结构。

jquery方法:

threshold:200表示距离可视区200px的时候加载这张图片。更多API:https://www.cnblogs.com/fanmiao/p/6002907.html

使用js的话,可以利用new Image()对象。在页面加载的时候先给图片加载一张模糊图片进行占位,不至于页面加载大图的时候一片空白,然后利用new Image()的load事件,图片加载完成的时候去替换。
使用方法:

在加载图片完成以后 oImg.onload = null; 是为了放在IE浏览器内存泄漏,以及gif图片多次触发onload事件

使用css方法,可以在css里面把需要加载的图片写在背景里面。这样有个缺点就是网页会一次性加载很多背景图片导致刚打开页面的时候是一片空白。所以可以利用js来解决

使用ajax。原理和使用js原理一样。

评论 ( 3 )
最新评论
huoyingwen 2F 2018-03-15 18:01:43 3F

chenyi_web 1F 2018-03-13 14:35:01 2F

提前加载 和 延迟加载 的意思吗

huoyingwen 2018-03-09 15:58:50 1F

标题是实现预加载,你内容是懒加载,预加载和懒加载是有区别的