`
deng131
  • 浏览: 672271 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

js预加载/延迟加载

阅读更多
在面试中问道了问题,虽然也看过相关资料,但是还是需要增强和梳理下,这些方式出现的需求和实现上的区别。

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
分享到:
评论
8 楼 deng131 2010-08-11  
cloudgamer 写道
延迟加载是Lazyload吧
我写过一个这样的延迟加载效果
你可以研究一下

有空研究下
7 楼 cloudgamer 2010-08-11  
延迟加载是Lazyload吧
我写过一个这样的延迟加载效果
你可以研究一下
6 楼 incredible 2010-08-10  
#2 & #1 are not talking the same thing!

<script type='text/javascript' defer='defer'> is lame
5 楼 deng131 2010-08-10  
skyfen 写道
moneyfulj 写道

<script type='text/javascript' defer='true'>
的使用和楼主说的有什么原理上的不同

楼上所说的很好啊。我就遇到这样的问题。
还有一种就是当一个页面图片太多时,可以采取图片异步通信解决。就是一个页面先出文字,当所有文字加载完成后,再加载图片.

浏览器兼容问题的存在。
4 楼 skyfen 2010-08-10  
moneyfulj 写道

<script type='text/javascript' defer='true'>
的使用和楼主说的有什么原理上的不同

楼上所说的很好啊。我就遇到这样的问题。
还有一种就是当一个页面图片太多时,可以采取图片异步通信解决。就是一个页面先出文字,当所有文字加载完成后,再加载图片.
3 楼 rolenz 2010-08-10  
我到是想知道Lazy loader能不能在浏览器可视区域内加载一个DIV中的内容(非图片)
2 楼 mercyblitz 2010-08-08  
楼主是说当document is ready的时候,在动态加载资源吗?
1 楼 moneyfulj 2010-08-08  

<script type='text/javascript' defer='true'>
的使用和楼主说的有什么原理上的不同

相关推荐

    浅析js预加载/延迟加载

    JavaScript预加载和延迟加载是两种优化网页性能的重要技术,它们主要针对JavaScript文件和资源的管理,以提升用户体验和页面加载速度。预加载是为了尽早获取所需资源,而延迟加载则是在需要时才开始加载,以此平衡...

    jquery图片预加载延迟加载

    在网页设计和开发中,图片预加载和延迟加载是两种重要的优化策略,它们可以显著提升网站性能和用户体验。本文将详细探讨使用jQuery实现这两种技术,以及它们如何协同工作以优化页面打开速度。 首先,让我们理解预...

    jquery图片预加载

    `images`文件夹自然存放了需要预加载的图片,而`js`文件夹可能包含了`jQuery`库和上述预加载函数的JavaScript代码。 预加载策略并不止于简单地逐个加载所有图片。对于大图或者数量众多的图片,可以采用分批加载、懒...

    图片预加载js

    本文将深入探讨“图片预加载js”这一主题,包括预加载的原理、实现方式以及如何使用JavaScript来优化这个过程。 一、图片预加载的原理 图片预加载是指在用户实际看到图片之前,提前将图片数据加载到浏览器的缓存中...

    jquery.lazyload图片预加载效果 jquery预加载

    2. 图片标记:对需要延迟加载的图片添加"data-src"属性,用于存放实际的图片URL,同时保留传统的"src"属性,指向占位符。 ```html &lt;img data-src="path/to/real-image.jpg" src="path/to/placeholder.gif" alt="预...

    手机页面预加载效果

    2. **延迟加载**:延迟加载(Lazy Loading)是一种优化策略,它只在内容进入视口时才开始加载,而非一次性加载所有内容。这在资源有限的移动设备上尤其有用,可以减少初始加载时间,提升页面响应速度。 3. **资源...

    图片预加载效果

    - JavaScript预加载:使用JavaScript创建新的`Image`对象,并设置其`src`属性为需要预加载的图片URL。例如: ```javascript var img = new Image(); img.src = 'path/to/image.jpg'; ``` - HTML `&lt;link&gt;`标签...

    js图片预加载

    JavaScript图片预加载是一种优化网页性能的技术,特别是在网页中包含大量图片或者有动态加载图片需求时。这种方法通过在用户实际查看图片之前,提前加载图片资源,减少用户等待时间,提升用户体验。这里我们将深入...

    js实现图片预加载.tx

    本文将详细探讨如何使用JavaScript实现图片预加载,并通过一个具体的示例代码来解析其实现过程。 #### 一、图片预加载的基本概念 图片预加载是指在用户请求页面时,预先加载页面中即将显示或可能需要的图片资源。...

    两套预加载表针代码

    其次,预加载的重要性在于它可以提高关键资源的优先级,使得用户在打开页面时能更快地看到主要内容,而不会被延迟加载的资源所阻塞。但需要注意的是,预加载并不适合所有资源,因为它会占用网络带宽,如果用户未实际...

    预加载瀑布流

    预加载技术的核心是利用JavaScript或CSS实现。当用户滚动到页面底部或者某个阈值时,触发一个事件,这个事件会加载下一批图片或其他资源。JavaScript可以通过监听滚动事件(如`onscroll`)来实现这一功能。同时,...

    jQuery实现图片预加载

    **jQuery实现图片预加载** 在Web开发中,用户体验是一个至关重要的因素,而图片加载速度直接影响着用户对网站的第一印象。为了提升用户体验,开发者通常会采用图片预加载技术,确保图片在用户需要时能够快速显示。...

    原生无依赖预加载插件

    预加载技术的核心是预先获取用户可能需要但尚未立即使用到的资源,如图片、音频、视频或脚本,以便在实际需要时能够更快地加载和执行,减少页面加载延迟。 在JavaScript开发中,预加载常用于处理异步资源加载,避免...

    图片预加载js使用简单

    "图片预加载js使用简单",这表明我们将探讨一种易于集成和使用的JavaScript库来执行预加载任务。其中,jQuery的lazyload插件是一个非常流行的选择。jQuery是一个强大的JavaScript库,简化了DOM操作、事件处理和动画...

    图片预加载学习(三):无序加载之图片切换

    2. **减少延迟**:通过在后台下载图片,预加载减轻了主线程的工作负担,避免了因图片加载导致的页面阻塞。 3. **资源管理**:预加载可以根据优先级选择性地加载图片,优化网络资源的使用。 接下来,我们将关注...

    Jquery预加载图片

    要同时大量图片,由于网络、图片大小等因素导致网页加载慢,这种用户体验很差的形式应该避免出现。类似于淘宝的图片预加载功能。... 该js文件是为了实现图片预加载或者延迟加载的功能,提高用户体验。

    图片预加载

    在网页设计中,图片预加载是一项重要的优化技术,它的主要目的是提高用户体验,通过预先加载用户可能需要的图片,使得图片可以更快地展示出来,避免了用户在浏览网页时因为图片加载延迟而产生的等待感。本篇文章将...

    懒加载预加载实现源码及笔记整理

    JavaScript在实现懒加载和预加载中扮演关键角色。我们可以使用Intersection Observer API来监听元素是否进入视口,一旦进入,就启动加载。这个API是现代浏览器支持的一个特性,可以避免频繁的滚动事件监听,提高性能...

    延迟加载js代码下载(包括页面延迟加载以及图片延迟加载)

    本篇文章将详细讲解延迟加载在JavaScript(js)和jQuery中的应用,以及如何实现页面和图片的延迟加载。 一、延迟加载的概念 延迟加载,也称为懒加载(Lazy Loading),是指在需要时才加载资源的技术。这种技术主要...

Global site tag (gtag.js) - Google Analytics