在面试中问道了问题,虽然也看过相关资料,但是还是需要增强和梳理下,这些方式出现的需求和实现上的区别。
Pre loader 预加载一般有两种常用方式:xhr和动态插入节点的方式。动态插入节点是最为简单也最为广泛的一种异步加载方式,然后使用动态插入节点方法加载的文件都会在加载后立即执行,javascript的执行一方面会占用浏览器js执行进程,另一方面也可能改变页面结构,而css 的执行更有可能让整个页面变化。xhr方式虽然不会执行脚本,但是由于同域的限制
Lazy loader方式在一些图片非常多的网站中非常有用,在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置才加载,这样对于含有很多图片的比较长的网页来说,可以加载的更快,并且还能节省服务器带宽。jQuery插件中也有插件来实现该功能。
在腾讯的QQ空间和微博中就采用这样技术实现,在大访问量的网站,这样就相对可以减少服务器的压力,在用户访问到所见区域和下面内容时候才去请求。而不是传统的一次把整个页面下载过来,在下载过程中存在着用户等待内容呈现。
IE中使用new Image().src 去预加载文件。
其他浏览器使用动态插入document.createElement('object')标签来完成加载。
说明:
1. new Image().src 之所以不能在ff中使用是因为ff对图片实现了一套单独的缓存。 同时safari和chrome看起来也没有被缓存。
2. 动态插入object 标签需要插入到非head部分,以触发加载。
3. ie7 ie8 也可以通过一些代码使用动态object加载文件。
参考;
http://www.cnblogs.com/cloudgamer/archive/2010/02/01/LazyLoad.html
http://www.blogjava.net/sinoly/archive/2007/09/14/145161.html
http://www.cnblogs.com/comdeng/archive/2008/06/15/preload_image.html
http://www.itfeed.cn/post.asp?id=402
分享到:
相关推荐
Pre loader 预加载一般有两种常用方式:xhr和动态插入节点的方式。动态插入节点是最为简单也最为广泛的一种异步加载方式,然后使用动态插入节点方法加载的文件都会 在加载后立即执行,javascript的执行一方面会占用...
要同时大量图片,由于网络、图片大小等因素导致网页加载慢,这种用户体验很差的形式应该避免出现。类似于淘宝的图片预加载功能。... 该js文件是为了实现图片预加载或者延迟加载的功能,提高用户体验。
懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染。 2)区别: 两种技术的本质:两者的行为是相反的,一个是提前...
懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片。 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染。 两种技术的本质:两者的行为是相反的,一...
:high_voltage: React预加载图像从背景颜色或占位符图像预加载和淡入图像。 对延迟加载的可选支持,以便在滚动到视图中时加载图像。 使用并在没有浏览器支持(咳嗽、IE、咳嗽)时退回到简单的预加载。用法使用yarn ...
这是一款基于ydxLazyLoad.js插件实现的图片延迟加载特效,jQuery图片预加载代码。
jQuery图片预加载代码是一款基于ydxLazyLoad.js插件实现的图片延迟加载特效。
javascript图片预加载,监测图片加载完成,获取图片真实尺寸的组件(图片延迟加载) 如何使用 // 首先在页面中引入imageReady.js /** * @param img string|Image 图片url或者Image对象 * @param onready Function ...
新功能:预加载链接-在用户单击链接之前预取页面,以提高感知的加载速度和用户体验) 增强功能:启用“最小化 CSS / JS”选项后,在本地托管和最小化第三方 CSS 和 JS 文件 增强功能:自动将 font-display:swap ...
主要介绍了Jquery实现图片预加载与延时加载的方法,分别介绍了原生javascript与jQuery插件实现图片的预加载及延迟加载的方法,具有一定的参考借鉴价值,需要的朋友可以参考下
jQuery图片预加载代码是一款基于ydxLazyLoad js插件实现的图片延迟加载特效。
jQuery网页图片延迟加载代码基于jquery-1.8.3.min.js制作,实现图片预加载效果,代码附详细中文注释,使用方便。
有很多种方法来实现图片的预加载,通常大部分使用Javascript让事情滚动。不要再受Javascript预载的束缚了吧,用CSS你就可以毫不麻烦的预载你的图片。 为什么使用预载 你为什么会考虑使用预载呢?你是否曾有个网站,...
分享一款基于jQuery图片预加载ydxLazyLoad.js代码。这是一款基于ydxLazyLoad.js插件实现的图片延迟加载特效,感兴趣的小伙伴们可以参考一下
快速Pageload使用预加载功能使您的浏览体验更流畅,整个Web更快。 这是通过及时预加载您很有可能访问的页面来存档的。 研究表明,当您将鼠标悬停在链接上时,有50%的机会单击链接。 当您将鼠标悬停时,Pageload会...
可组合的片段,预加载图像和处理故障。 对呼叫者的完全演示控制(呈现道具)。 使用IntersectionObserver并提供polyfill信息的现代,高性能实现。 渴望加载/服务器端渲染支持。 去抖/延迟; 可以在加载之前等待...
本篇文章主要介绍了js图片加载效果实例代码(延迟加载+瀑布流加载),非常具有实用价值,需要的朋友可以参考下