javascript - 计算Placeholder可能的高度问题
天蓬老师
天蓬老师 2017-04-10 14:23:45
[JavaScript讨论组]

现在我想实现一个效果:

一张手机显示的新闻类网页,有图片也有文字,图片的宽度都近似于100%的屏幕宽度,并且是随着屏幕宽度的变化而变化的。高度是等比例进行缩放的。

但是这些图片我希望使用懒加载的办法加载进去,在懒加载之前,在显示图片的位置先显示一个placeholder的图片(或者一个其他什么东西都可以)。但是我希望placeholder的高度和最终图片的高度是一样的,也就是不希望图片加载完成之后页面高度突变。

而最终图片的原始宽高我是可以通过服务器知道的,可以在HTML生成的时候就知道,只是这张图片在我这台设备上最终会显示的宽高我需要计算。

其实就像网易新闻里面的那种效果,我要怎么去实现呢?


天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回复(1)
PHPz

由于图片的原始宽高你可以事先知道,而图片要显示的宽度是固定的(假如要撑满100%),所以可算出来图片要显示的高度。

要显示的高度 = 原始高度 / 原始宽度 * 要显示的宽度

<img class="lazy" src="temp-url" src="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() );
});
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号