javascript - 在客户端通过javascript显示图像

Question

我正在构建一个网站，我必须在页面上多次显示用户的个人资料图片，例如 10 到 15 次。个人资料图片大小为 80Kb，是从 url 获取的(我的服务器上不存在)。多次显示会增加浏览器请求，从而增加页面大小。是否有任何方法可以通过客户端的 javascript 显示图像，以便图像仅下载一次并保存到某个变量中以便多次显示。或者，如果您知道更好的选择，我们将不胜感激。非常感谢。

Answer 1

请引用此链接

https://www.ibm.com/developerworks/community/blogs/bobleah/entry/html5_code_example_store_images_using_localstorage57?lang=en

注销时您可以清除存储

<script>
      var hero;

      if ( localStorage.getItem('heroImg')) {
        hero = localStorage.getItem('heroImg');
      }
      else {
        hero = '/9j/4AAQSkZJRgABAgAAZABkAAD/7    /.../    6p+3dIR//9k=';
        localStorage.setItem('heroImg',hero);
      }

      document.getElementById("hero-graphic").src='data:image/png;base64,' + hero;
    </script> 


    <img id="hero-graphic" alt="Blog Hero Image" src="" />

这里hero = '/9j/4AAQSkZJRgABAgAAZABkAAD/7/.../6p+3dIR//9k=';可以通过ajax获取你的头像链接