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

概述我的图像具有声明的宽度和高度,例如： <img src="foo.jpg" width="1500" height="1800" alt="bar" /> 它们位于响应式网格内,因此它们以最大宽度显示：100％.它们是懒惰的.问题是,尽管有height：auto;图像在加载之前总是显示正方形,当它们加载完成时会在页面高度上产生跳跃. 所以上面的图像示例,在我的960px宽度网格,将显示一个占位符9 我的图像具有声明的宽度和高度,例如：

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

它们位于响应式网格内,因此它们以最大宽度显示：100％.它们是懒惰的.问题是,尽管有height：auto;图像在加载之前总是显示正方形,当它们加载完成时会在页面高度上产生跳跃.

所以上面的图像示例,在我的960px宽度网格,将显示一个占位符960px x 960px,直到完整的图像加载,在这一点上将是960px x Y(其中Y是正确的高度).

我的问题是如何获得占位符图像来模拟实际图像的最终加载尺寸？

解决方法 您可以使用以下解决方案实现所需的效果.

HTML：

<img src="blank.gif"  src="foo.png" wIDth="1500" height="1800" alt="bar">               ▲                ▲               ║                ╚═══ The class will be used for the lazy loader below               ║               ╚═══ Use faulty gif here to hIDe it from showing before loaded

Hint: If you want the placeholder rectangle to be visible and in one color,consIDer using a 1×1 px image for blank.gif. It will load
very fast and will stretch nicely to your proportions,filling it with
the color of your choosing.

JavaScript的：

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

资料来源：
Lazyload脚本可以找到here.

总结

以上是内存溢出为你收集整理的html – 声明宽度和高度的图像在加载前呈现方形全部内容，希望文章能够帮你解决html – 声明宽度和高度的图像在加载前呈现方形所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。