网页图片的懒加载和预加载

来源：互联网发布：淘宝上买摩托靠谱吗编辑：程序博客网时间：2024/04/30 03:10

网页涉及到大量图片时，由于图片大量加载，导致页面会出现一段时间的“空白”，应对这种情况需要用到图片的懒加载和预加载技术，

预加载主要原理：：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。在含有大量图片网页加载之前，进行图片的加载，一般通过new image() 对象，设置其src来实现预载（浏览器会缓存）。由于浏览器把图片下载到本地，同样的src就会从缓存中读取。当Image下载完图片头后，会得到宽和高，因此可以在预载前得到图片的大小（使用循环获取高度变化，可以使用计时器），条件预加载，是不错的技巧，根据当前用户的行为，来预加载相应图片。

懒加载（延迟加载）主要原理：先不是image的src 属性，待需要显示该image(),在设置其src的值，这个时候才开始加载图片。使用懒加载时，当需要该图片时，可能正在加载中，这个时候页面上会显示一个图片空白框，这个时候我们可以包裹该image的元素（即该image的父元素）设置一个“load”的gif背景图片来美化，显示“正在加载”的效果，image完成加载后就覆盖其上了。

缓存图片：即使从缓存读取图片，还是会先向服务器发送请求，然后更据服务器返回状态来判断的，“304”则从缓存读取图片，所以即使使用缓存还是会自动触发服务器验证。

关于缓存：以下摘自百度知道

如何能html改图片时直接使用本地缓存，完全不走流量(html 或 javascript 解决方案,chrome浏览器)

2014-07-18 10:29jyaow | 浏览 520 次

浏览器

各位大神，我的网页需要动态地修改图片。其实这些图片都是事先下载好的，在客户端缓存。我用javascript修改图片的src时，浏览器仍然向服务器发送GET，服务器返回304状态码，之后浏览器才使用缓存。整个过程客户端虽然没有重复加载图片，但是还是需要服务器的304状态回复。我想问问有没有方法可以避免客户端向浏览器索要304，直接修改图片的方法。总得来说我的过程是这样的：触发事件--》图片开始移动、翻滚，一直到某点--》更换图片--》图片继续移动、翻滚直至结束如果中间‘更换图片’的时候，服务器卡了一下，会导致图片的移动不连续。如果建立新的Image对象，在‘更换图片’时替换对象的话，那么这个新的Image对象的style样式会和之前的不同。有没有什么简单的方法？谢谢

举报| 2014-07-18 15:30提问者采纳

首先…作为吊丝程序员（学生现役）…给几个吊丝的方法。

预加载隐藏

1

2

3

4

5

//在预加载的时候，直接读出隐藏的图片
$("#blablabla").append($.("#someImg").clone());
$("#blablabla").last().attr("sec",$.load("url~~~",function(){
    //做一下隐藏
}));

然后在一直到某点--》之后…就把原来的图片替换掉。

style的样式…如果还不一样的话……就是自己代码的问题了……

用web Strorage

简单来说…把图片数据流化并且放入web strorage,然后在读取的时候生产图片，并且放入img容器。

304状态是必要的

服务器端和客户端使用Conditional Gets功能验证缓存数据

客户端将条目放在缓存里，在过期之后重新验证。服务器端必须实现Conditional GET功能（使用ETags或者last modified的header）。

JS代码：

    $.ajax（{
    url: '/Home/ExpiresWithConditional',
    ifModified: true, // 这里是关键
    cache: true,
    success: function （data, status, xhr） {
    $（'#content'）.html（data.count）；
    }
    }）；

而让服务端响应304状态是确保在图片被修改过以后，能够再返回一个不同的值……

所以……

流量还是不要省了……→_→

如何实现页面直接读取缓存，且完全无http请求。可以利用html头或者javascript解决吗？

2014-07-27 02:05jyaow | 浏览 883 次悬赏：50

编程语言

您好，我的页面会动态的添加很多张相同的图片，而这张图片是预先就加载了的。现在的问题是，图片加载时一切正常，服务器发送图片并且返回200代码。在之后，我动态地利用javascript添加新的，相同的图片的时候，浏览器发送http请求，服务器返回304代码，之后浏览器使用本地缓存。但问题是，http请求需要时间，也增加服务器负担。我希望图片只在最开始加载一次，后面再添加的时候完全不用服务器介入。另外，比如我添加10张新的图片，用for循环连续添加，则服务器只收到一条http请求。如果每隔0.5秒添加一张，服务器收到10条http请求。是不是说明，如果两张图片添加的间隔时间短的时候，第二章图片的http请求就被无视了。我希望的就是这个所谓的‘间隔时间短’，可以长达1小时。即，1小时之内添加图片的时候，不发送http请求。不知道什么机制可以实现，求大神赐教。

0 0