zoukankan      html  css  js  c++  java
  • 缓存图片技术

    有时候为了相应一些用户的点击,展示一张图片,图片比较大的化,当点击事件触发后,下载图片可能需要一段比较长的事件。这个时候我们可以用一些技术,当用户在做其他事情的时候,我们可以先把图片加载进来。

    客户端js定义了一个专用的API来达到一个目的:为了强制让图片缓存起来,首先利用Image()构造函数来创建一个屏幕外图片对象,之后将该对象的src属性设置成期望的URL。

    下面是两个代码判断:

    一:

    1   <div>
    2         <script>
    3         var image = new Image();
    4         image.src = "http://snowinmay.net/test/10.jpg";
    5         </script>
    6         <img src="10-1.jpg" alt="图片" onmouseover="this.src='http://snowinmay.net/test/10.jpg'" onmouseout="this.src='10-1.jpg'">
    7     </div>

    二:

    1   <div>
    2         <img src="9-1.jpg" alt="图片" onmouseover="this.src='http://snowinmay.net/test/9.jpg'" onmouseout="this.src='9-1.jpg'">
    3     </div>

    代码一可以在加载页面的同时偷偷的加载10.jpg这个图片。当用户点击的时候,直接展现给用户。代码二的话页面加载的时候不加载9.jpg,只有当用户点击的时候才去加载图片,当网速不是很好的时候,就会有一个图片加载的过程。

    下面给出两个具体的例子:

    一:载入网页同时加载图片

    http://snowinmay.net/index-419.html

    二:载入网页的时候不加载图片

    http://snowinmay.net/index-510.html

    由这两个例子明显可以感觉到第二个页面在点击图片的时候有一个加载过程,而第一个页面则直接显示图片。

    在一中多加的代码:

    1 <script>
    2         window.onload = function(){
    3             var image = new Image();
    4             for (var i = 1; i <= 9; i++) {
    5             var    url = "http://snowinmay.net/img/" + i + ".png";
    6                 image.src = url;
    7             };
    8         }
    9     </script>

    注意:

    1.做测试的时候需要清除缓存。

    2.需要让页面加载完再测试。

  • 相关阅读:
    UVa 1451 Average (斜率优化)
    POJ 1160 Post Office (四边形不等式优化DP)
    HDU 3507 Print Article (斜率DP)
    LightOJ 1427 Substring Frequency (II) (AC自动机)
    UVa 10245 The Closest Pair Problem (分治)
    POJ 1741 Tree (树分治)
    HDU 3487 Play with Chain (Splay)
    POJ 2828 Buy Tickets (线段树)
    HDU 3723 Delta Wave (高精度+calelan数)
    UVa 1625 Color Length (DP)
  • 原文地址:https://www.cnblogs.com/snowinmay/p/3259979.html
Copyright © 2011-2022 走看看