• 图片预加载


    图片预加载是为了提高用户在浏览很多图片时的体验效果,比如我们在做图片翻转显示等待特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作。与图片懒加载相反,一个是提前加载,一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力。

    理解:一般浏览器加载图片是按需加载,就是当你请求图片时才给你加载你需要的图片;

            预加载就是在你请求之前将图片加载下来,当你请求时直接从浏览器缓存中响应给你;

         懒加载就是在你请求图片时不给你加载,当你到了指定位置时再给你加载。

    方法:现有的预加载方法是一次加载全部图片和一次加载部分图片,视项目而定。(待补充......)

    js预加载图片使用new Image()基本够用了

    new Image().src = 'http://img02.taobaocdn.com/tps/i2/T1iQhUXnxpXXXXXXXX-171-48.png'; //淘宝
    new Image().src = 'http://static.paipaiimg.com/module/logo/logo_2011_02_22.png'; //拍拍
    new Image().src = 'http://co.youa.baidu.com/picture/services/images/logo.png'; //有啊
    new Image().src = 'http://img1.t.sinajs.cn/t35/style/images/common/header/logoNew_nocache.png'; 

    预加载css、js、图片方法介绍及各浏览器测试效果:http://www.jb51.net/article/42085.htm

    new Image预加载图片详解:http://www.cnblogs.com/mz121star/archive/2012/11/01/javascript_preloadimages.html

    预加载常见的三种方法:http://www.jb51.net/article/57579.htm

  • 相关阅读:
    鸡尾酒之白兰地
    Hadoop面试总结(三)Hbase、Spark
    Hadoop面试总结(二)MySQL
    Hadoop面试总结(一)Linux命令、Scala
    View
    用户画像项目规划
    Apache kafka
    Resume
    蔡学镛
    【git】git常用操作
  • 原文地址:https://www.cnblogs.com/happy1992/p/7059962.html
Copyright © 2020-2023  润新知