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

最新推荐文章于 2024-08-11 17:57:19 发布

ou明

最新推荐文章于 2024-08-11 17:57:19 发布

阅读量4.1k

点赞数

分类专栏： html图片加载文章标签： html

本文链接：https://blog.csdn.net/yuegedetiang/article/details/51969768

版权

html图片加载专栏收录该内容

0 篇文章 0 订阅

订阅专栏

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

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

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

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

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

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

2014-07-18 10:29 jyaow | 浏览 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:05 jyaow | 浏览 883 次悬赏： 50

编程语言

您好，我的页面会动态的添加很多张相同的图片，而这张图片是预先就加载了的。

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

举报| 2014-07-27 19:09 网友采纳

图片加载的时间，本质上你有多少个 <image src="">标签，就会请求，多少次。因为图片src加载在不同浏览器表现也略有不同。不过你可以通过动态创建的方式。

 
          <!DOCTYPE html> 
         
          < 
          html 
          > 
         
          < 
          head 
          > 
         
          < 
          meta  
          charset 
          = 
          "utf-8" 
          > 
         
          < 
          title 
          >JS Bin</ 
          title 
          > 
         
          < 
          script 
          > 
         
          window.onload=function(){ 
         
          //images = new Array(); 
         
          for(var k=0;k< 
          5 
          ;k++){ 
         
          var img = document.createElement("img");     //创建一个img元素   
         
          img.src 
          = 
          "http://www.iyi8.com/uploadfile/2014/0606/20140606103936802.jpg" 
          ;   //给img元素的src属性赋值   
         
          img.width 
          = 
          "100" 
          ;    
         
          var myDiv = document.getElementById('div'); //获得dom对象   
         
          myDiv.appendChild(img);  
         
          } 
         
          } 
         
          </script> 
         
          </ 
          head 
          > 
         
          < 
          body 
          > 
         
          < 
          div  
          id 
          = 
          "div" 
          > 
         
          </ 
          div 
          > 
         
          </ 
          body 
          > 
         
          </ 
          html 
          >