计算Placeholder可能的高度问题
现在我想实现一个效果：
一张手机显示的新闻类网页，有图片也有文字，图片的宽度都近似于100%的屏幕宽度，并且是随着屏幕宽度的变化而变化的。高度是等比例进行缩放的。
但是这些图片我希望使用懒加载的办法加载进去，在懒加载之前，在显示图片的位置先显示一个placeholder的图片（或者一个其他什么东西都可以）。但是我希望placeholder的高度和最终图片的高度是一样的，也就是不希望图片加载完成之后页面高度突变。
而最终图片的原始宽高我是可以通过服务器知道的，可以在HTML生成的时候就知道，只是这张图片在我这台设备上最终会显示的宽高我需要计算。
其实就像网易新闻里面的那种效果，我要怎么去实现呢？
展开
收起
1
条回答
写回答
写回答
-
由于图片的原始宽高你可以事先知道，而图片要显示的宽度是固定的(假如要撑满100%)，所以可算出来图片要显示的高度。
要显示的高度 = 原始高度 / 原始宽度 * 要显示的宽度
<img class="lazy" src="temp-url" data-original="real-url" data-width="800" data-height="600" width="100%"> $('img.lazy').each(function(){ var $this = $(this); var originalWidth = +$this.data('width'); var originalHeight = +$this.data('height'); $this.height( originalHeight / originalWidth * $this.width() ); });2019-07-17 19:14:30赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
