zoukankan      html  css  js  c++  java
  • Google的两个图片预加载技术

    图片预加载技术是为了提高页面性能,改善用户体验。
    Google的这两个图片预加载技术很简单,一般都能看得懂。


    第一个:Google首页的中的一个图片预加载
    打开Google首页我们用抓包工具可以分析出Google首页中加载了一张图片:http://www.google.cn/images/nav_logo3.png


     

    其实这张图片Google首页根本就没有用到,在首页加载是为了让这张图片提前加载,存入本地缓存。这样在搜索结果也就可以直接读缓存中的图片,而不用再加载了。

    实现的方式也很简单,在body上加了个onload事件:

    JavaScript代码
    1. onload="sf();if(document.images){new Image().src='/images/nav_logo3.png'}"   

    所以,关键还不是在技术,而是怎么提高页面性能,改善用户体验。

     

    第二个:使用picasa的时候,注意到它首先是显示模糊的图片,然后图片突然变得清晰,这样做有一定的好处就是不会让用户感觉到图片加载过程中的空白时间。

    主要是实现思路:点击相片缩略图的时候,让缩略图首先加载到图片展示区,当大图加载完成后,将展示区中的缩略图替换成加载完成的大图;

    本身picasa很复杂,我做了简单的原型demo:http://www.css88.com/demo/imgloading/imgloading.html

    注意:重复测试请先清楚本地缓存

  • 相关阅读:
    Apache 基础
    Oracle
    DevOps
    Ansible
    Iptables 和Firewall 防火墙
    防火墙
    Linux
    Intellij IDEA 快捷键大全
    Java8,9 新特性
    Jmeter
  • 原文地址:https://www.cnblogs.com/yuzhongwusan/p/1342798.html
Copyright © 2011-2022 走看看