V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
xiaoyong
V2EX  ›  JavaScript

图片的延迟加载 lazyload 的占位图都是固定大小的,怎么让占位图与要加载的实际图片尺寸一致

  •  1
     
  •   xiaoyong · 2015-11-09 18:49:39 +08:00 · 10273 次点击
    这是一个创建于 3302 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如题。因为目前使用 lazyload 的 js 插件都是占位图固定尺寸的,如果占位图与需要加载的图片尺寸差别很大的话, 会出现页面的内容跳动。目前微信公众号的文章就解决的很好,占位图都是灰色的,但是尺寸与要加载的实际图片尺寸一致,加载出来的效果比较平滑。目前,可以想到的一个方法是让前端提供当前设备的浏览器宽度,然后计算高度。感觉还是不太靠谱。大家有没有更好的思路。多谢。

    14 条回复    2015-11-10 11:49:07 +08:00
    loveyu
        1
    loveyu  
       2015-11-09 18:55:47 +08:00
    首先你得知道图片显示的宽高
    Jaylee
        2
    Jaylee  
       2015-11-09 19:07:16 +08:00
    我这边目前也是使用让接口返回宽和高,然后加载占位图的,应该没有其它的办法了吧
    zhicheng
        3
    zhicheng  
       2015-11-09 19:20:07 +08:00 via Android
    固定高度计算宽带更合理。
    SourceMan
        4
    SourceMan  
       2015-11-09 19:21:40 +08:00 via Android
    让服务器给你返回
    paloalto
        5
    paloalto  
       2015-11-09 19:28:58 +08:00
    yushiro
        6
    yushiro  
       2015-11-09 19:33:54 +08:00 via iPhone
    其实需要知道的并不是图片的宽高,而是需要知道图片的宽高比,设计 api 的时候需要多带一个参数返回前端
    qgy18
        7
    qgy18  
       2015-11-09 21:36:44 +08:00 via iPhone
    移动端需要知道高宽比,根据宽算出高来。
    Light3
        8
    Light3  
       2015-11-09 21:50:09 +08:00
    可你尝试固定宽度 比如就 100PX 这样的 毕竟手机基本上就是一张图一行
    fakefish
        9
    fakefish  
       2015-11-09 22:52:43 +08:00
    如果图片是个正方形,可以用个 1px 的 base64 自动填充了
    Shy07
        10
    Shy07  
       2015-11-09 23:33:29 +08:00
    有一种图片叫渐进 jpg ,还有一种叫交错 png/gif
    wjfz
        11
    wjfz  
       2015-11-10 01:48:29 +08:00 via Android
    我倒是有种想法不知道可行性,请大家给予批评。

    存图片的时候把宽高写入文件名,前端正则出宽高然后占位。
    learnshare
        12
    learnshare  
       2015-11-10 09:25:16 +08:00
    提前把图像大小写到 HTML 内敛样式中,前提是页面由后端渲染,并且数据库里保存了图像大小
    skywatcher
        13
    skywatcher  
       2015-11-10 11:42:21 +08:00
    之前有想过这个问题,主要是避免加载的抖动,我感觉可以这样
    http://7ximdq.com1.z0.glb.clouddn.com/1445326252487#w=1000#h=900
    开始 URL 都已经传到前端,可以通过#w=1000#h=900 获取数据来设置占位大小(根据固定宽度或高度),动态加载图片时就不会出现抖动

    不过需要后端服务器的支持,保存和处理返回的 URL 附带这些参数

    知乎跳转到对应答案和评论就是这样实现的
    http://www.zhihu.com/question/36173438/answer/68338175?group_id=647004140790923264#comment-102845723
    skywatcher
        14
    skywatcher  
       2015-11-10 11:49:07 +08:00
    忽然想到,如果使用第三方服务器也可以,第三方是支持获取指定图片的信息的,可以自己请求后添加到 URL 尾部,前端就可以使用了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2762 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 08:24 · PVG 16:24 · LAX 00:24 · JFK 03:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.