声明宽度和高度的图像在加载前呈现方形

Question

我有声明宽度和高度的图像,例如:

<img src="foo.jpg" width="1500" height="1800" alt="bar" />

它们位于响应式网格中,因此它们显示在max-width: 100%.它们是延迟加载的.问题在于,尽管有height: auto;图像,图像在加载之前总是显示正方形,这会在加载完成后产生页面高度的跳跃.

因此,上面的图像示例,在我的960px宽度网格中,将显示960px x 960px的占位符,直到加载完整图像,此时它将是960px x Y(其中Y是正确的高度).

我的问题是如何让占位符图像模仿实际图像的最终加载尺寸？

Answer 1

您可以通过以下解决方案达到您想要的效果。

\n\n

HTML：

\n\n

<img src="blank.gif" class="lazy" data-src="foo.png" width="1500" height="1800" alt="bar">  \n             \xe2\x96\xb2                \xe2\x96\xb2  \n             \xe2\x95\x91                \xe2\x95\x9a\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90 The class will be used for the lazy loader below  \n             \xe2\x95\x91  \n             \xe2\x95\x9a\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90 Use faulty gif here to hide it from showing before loaded\n

\n\n

\n

提示：如果您希望占位符矩形可见且采用一种颜色，请考虑使用 1x1 像素图像blank.gif。它将加载速度非常快，并且会很好地拉伸到您的比例，并用您选择的颜色填充它。

\n

\n\n

JavaScript：

\n\n

/* lazyload.js (c) Lorenzo Giuliani\n * MIT License (http://www.opensource.org/licenses/mit-license.html)\n *\n * expects a list of:  \n * `<img src="blank.gif" data-src="my_image.png" width="600" height="400" class="lazy">`\n */\n\n!function(window){\n  var $q = function(q, res){\n        if (document.querySelectorAll) {\n          res = document.querySelectorAll(q);\n        } else {\n          var d=document\n            , a=d.styleSheets[0] || d.createStyleSheet();\n          a.addRule(q,\'f:b\');\n          for(var l=d.all,b=0,c=[],f=l.length;b<f;b++)\n            l[b].currentStyle.f && c.push(l[b]);\n\n          a.removeRule(0);\n          res = c;\n        }\n        return res;\n      }\n    , addEventListener = function(evt, fn){\n        window.addEventListener\n          ? this.addEventListener(evt, fn, false)\n          : (window.attachEvent)\n            ? this.attachEvent(\'on\' + evt, fn)\n            : this[\'on\' + evt] = fn;\n      }\n    , _has = function(obj, key) {\n        return Object.prototype.hasOwnProperty.call(obj, key);\n      }\n    ;\n\n  function loadImage (el, fn) {\n    var img = new Image()\n      , src = el.getAttribute(\'data-src\');\n    img.onload = function() {\n      if (!! el.parent)\n        el.parent.replaceChild(img, el)\n      else\n        el.src = src;\n\n      fn? fn() : null;\n    }\n    img.src = src;\n  }\n\n  function elementInViewport(el) {\n    var rect = el.getBoundingClientRect()\n\n    return (\n       rect.top    >= 0\n    && rect.left   >= 0\n    && rect.top <= (window.innerHeight || document.documentElement.clientHeight)\n    )\n  }\n\n    var images = new Array()\n      , query = $q(\'img.lazy\')\n      , processScroll = function(){\n          for (var i = 0; i < images.length; i++) {\n            if (elementInViewport(images[i])) {\n              loadImage(images[i], function () {\n                images.splice(i, i);\n              });\n            }\n          };\n        }\n      ;\n    // Array.prototype.slice.call is not callable under our lovely IE8 \n    for (var i = 0; i < query.length; i++) {\n      images.push(query[i]);\n    };\n\n    processScroll();\n    addEventListener(\'scroll\',processScroll);\n\n}(this);\n

\n\n

来源： \n可以在此处找到 Lazyload 脚本。

\n