zoukankan      html  css  js  c++  java
  • 【优化】图片加载

    常规建议:

    多从加载资源的格式及大小入手。 例如图标使用icon-font、svg、雪碧图, 以及base64等新格式图片。

    google在2010年推出的webp。

    图片瀑布,则是建议使用懒加载的方式,即拖动滚动的条事件再一次进行加载。

    一些新建议:

    1. Medium ,先加载缩略图完后再加载高清原图。
        window.onload = function() {
          
          var placeholder = document.querySelector('.placeholder'),
              small = placeholder.querySelector('.img-small')
          
          // 1: load small image and show it
          var img = new Image();
          img.src = small.src;
          img.onload = function () {
           small.classList.add('loaded');
          };
          
          // 2: load large image
          var imgLarge = new Image();
          imgLarge.src = placeholder.dataset.large; 
          imgLarge.onload = function () {
            imgLarge.classList.add('loaded');
          };
          placeholder.appendChild(imgLarge);
        }
    
    1. google, 预加载 ,加载背景为图片主要颜色, 随后显示加载完成的图片

    参考

    blog原文

  • 相关阅读:
    爱上你的一百个理由 (网摘)
    梦想向右,沉默向左
    明夕何夕,君已陌路。
    不肯嫁的几种男人(转)
    一剪梅
    C# preprocessor Directives
    Language
    C# Language Tour
    Web application
    Unsafe code
  • 原文地址:https://www.cnblogs.com/daaasheng/p/9778026.html
Copyright © 2011-2022 走看看