首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
V2EX  ›  分享创造

[发布]temp.im 一个图片占位符服务

  •  3
     
  •   hzlzh · 2013-01-13 23:20:04 +08:00 · 13184 次点击
    这是一个创建于 2407 天前的主题,其中的信息可能已经有所发展或是发生改变。
    网站:
    http://temp.im/
    域名含义:I'm temp | 我是临时的(图片)

    使用范例:
    http://temp.im/123×456

    描述:提供用于占位的图片文件在线托管,方便快捷的获得临时占位图片链接

    特性:
    * 所有图片文件托管在Drop/box上,安全稳定
    * 使用Nginx [反//向//代//哩]避免了Drop/box被xx
    * 所有图片已经静态生成,无需计算生成时间,快速响应
    * 优化了http head,支持 <img alt="" /> 及 CSS background-image:url() 等调用方式
    * 支持任意整数尺寸图片调用从 1×1 -> 1024×768
    * 无需.png 或 .jpg等后缀,直接调用

    制作过程以及在Github 和 Dropbox 的选择遇到的问题感兴趣的可以进一步看博客里写了,欢迎交流:
    https://zlz.im/temp-im-placeholder-images-service/

    附图:
    第 1 条附言  ·  2013-01-14 00:37:09 +08:00
    更正一下我2L的回复:
    Dropbox每日限制流量 20G,参看:
    https://www.dropbox.com/help/45/en
    这个服务处理图片是考虑这个问题的,所以精简了尺寸,图片都是0.4k->1.4k左右一张,理论是不会超的。
    第 2 条附言  ·  2013-03-02 20:49:35 +08:00
    BTW:
    首页所有图片尺寸队列是斐波那契数列哟,完美啊。
    1
    1
    2
    3
    5
    8
    13
    21
    34
    55
    89
    144
    233
    377
    第 3 条附言  ·  2014-05-14 12:33:26 +08:00
    加入了 七牛CDN 的支持,国内分法速度很快。
    第 4 条附言  ·  2014-06-02 11:09:46 +08:00
    更新了字体大小和文件返回类型,七牛CDN已同步。
    第 5 条附言  ·  2014-06-03 18:34:22 +08:00
    补充一下,支持自定义 背景色和文字色 颜色参数:

    http://temp.im/123x456/f2f/fff
    http://temp.im/123x456/000000/ff2222

    第 6 条附言  ·  2014-07-04 10:49:32 +08:00
    第 7 条附言  ·  2015-12-30 00:20:29 +08:00
    号外:现已全面接入 七牛 CND 自定义域名,快来体验飞一般的感觉吧。

    52 回复  |  直到 2015-12-30 12:05:35 +08:00
        1
    honk   2013-01-13 23:39:19 +08:00 via Android   ♥ 1
    没有商业支持,又想作为公共服务的话,流量成本会很大。

    推荐这个:
    http://imsky.github.com/holder/
        2
    hzlzh   2013-01-13 23:56:33 +08:00
    @honk 不需要商业支持,使用的 Dropbox Public目录+Nginx 反向代理:
    * Dropbox 托管免费
    * Dropbox 服务器不会挂
    * Dropbox 流量无限
    唯一浪费就是我一个小号的5G Dropbox 储存空间而已。
        3
    NemoAlex   2013-01-14 00:00:24 +08:00
        4
    huihen   2013-01-14 00:02:33 +08:00
    dropbox流量有限制,貌似一天20G?
        5
    hzlzh   2013-01-14 00:07:13 +08:00
    @honk 补充一下,不单独调用js的好处是,比如做完了Html重构 的 demo,可以直接发一个单文件就能给对方预览:[另存为这个文件看看]
    https://gist.github.com/4524827
        6
    insraq   2013-01-14 00:14:12 +08:00
    一直用这个:http://placekitten.com/
        7
    hzlzh   2013-01-14 00:15:07 +08:00
    @NemoAlex 我为什么不在前端规范中调别人做的那种动态程序生成图片的服务,就是考虑稳定性这个原因,除此之外,要求不高的可以使用这个
    http://placehold.us/233x233
    --
    Try:
    http://getimg.in/22%E5%85%882x30
    http://getimg.in/22xx30
        8
    hzlzh   2013-01-14 00:24:22 +08:00
    @huihen 嗯,是的。Dropbox每日限制流量 20G,参看:
    https://www.dropbox.com/help/45/en
    我处理图片是考虑这个问题了,所以跟精简尺寸,都是0.4k->1.4k左右一张,理论是不会超的。

    @insraq
    @NemoAlex 其实还有个点,你们不觉得 temp.im 更容易记忆么?lol
        9
    honk   2013-01-14 00:27:08 +08:00 via Android
    @hzlzh
    dropbox public 目录流量是有限制的;

    demo 的话,直接放dropbox public, 发url给对方看不是更方便?如果讲到另存的话,js 直接引用线上的,一样可以是单文件;

    当然,这些都是开发阶段的个人偏好,自己喜欢就好
        10
    hzlzh   2013-01-14 00:33:44 +08:00
    @honk
    流量的问题看8L回答,

    Demo分享的问题就复杂了:
    不是每个人都用一样的网盘,而且Dropbox撞墙,对方若访问不了会叫的。demo是给非技术人员看,越优雅越好,弄一些容易复杂化的代码进去,可能会有不好的效果。

    个人开发我同意你的,自己开发需要用占位符的话,怎么方便怎么好,但团队间互相传递Demo,比如前端->设计师 | 前端->产品 | 前端->另一个前端,用占位符会好很多。
        11
    guozhi   2013-01-14 00:50:55 +08:00
        12
    honk   2013-01-14 00:51:10 +08:00 via Android
    @hzlzh
    可能你没细看我发的那个 repo , 其实除了多引用一个 js 文件外,占位符用法一样,完全可以不用额外写 js 代码。
    最大的好处是,它不需要依赖服务端来存储图片,甚至它不会向服务端发请求
        13
    hzlzh   2013-01-14 01:13:06 +08:00
    @honk 你介绍那个之前我下载下来还看了里面的readme.md,这个占位符的思路和我这个是两种完全不同的想法。
    说几个这种offline js处理方法的弊端吧:

    * 为了避免404 作者建议使用`data-src`代替`src`
    问题:若用js方法做了demo,设计师最终图出来之后我要替换的不只是URL 还要改标签(data-src -> src)。
    * 由于基于JS,在没有JS环境时此思路行不通,如:某软件或APP中临时调用一张占位图(我就遇到过iOS 移动嵌入页面时需要占位来查看Retina的适配情况)
    * 最后也是最重要的一点:
    比如我重构了一个WordPress 主题,当前banner image是预留的 高:300px,宽:1024px;仅此一处需要使用一张占位符,为此开销多余的js调用来实现显得不可取。

    当然在特定的情况下,这个js的解决方案优势也很明显,就是offline,完全拜托了网络的禁锢。
    特别是有的公司或开发环境是内网,无法访问万维网的情况,显得尤为有用,是么?
        14
    hzlzh   2013-01-14 01:21:14 +08:00
    @honk 突然想到我做这个的初衷,去年的一天,我发了重构稿(当时用的 http://placehold.it/ 服务)给对方,结果对方浏览器中所有的占位图都挂了(后查出是服务器稳定原因),页面布局失真,自此不再信任个人托管服务器的稳定性。如果当时我使用JS `Holder` 或许不会出错,不过还是不愿意多调用一个额外的js库,习惯问题吧。
        15
    darcy   2013-01-14 09:02:31 +08:00   ♥ 1
    @hzlzh 插入的GA代码多了几个空格
        16
    kofj   2013-01-14 16:50:22 +08:00   ♥ 1
        17
    hzlzh   2013-01-26 19:05:07 +08:00 via iPhone
    @darcy 我是故意的,你信么?lol不用统计更快
        18
    qiuai   2013-01-26 20:00:43 +08:00
    手上有个 imgs.in 做个啥好呢......
        19
    qiuai   2013-01-26 20:02:53 +08:00
    好吧.域名掉了.....
        20
    hzlzh   2013-01-26 21:20:54 +08:00
    @qiuai 做个图片图片流站?
        21
    qiuai   2013-01-26 22:28:32 +08:00
    @hzlzh 刚发现域名掉了.唉.算了.反正暂时也没有图片站这一块的需求
        22
    hzlzh   2013-01-27 13:21:06 +08:00
    这里文中的链接中字母”x“ 被替换成了utf-8字符”ד
    如下:
    http://temp.im/123x456
    http://temp.im/123%C3%97456

    造成了部分用户撞到404页面,请 @Livid 帮修改下那个字母,不知道什么导致的,是不是[bug]?
        23
    m   2013-01-27 14:25:59 +08:00
    @hzlzh 我想知道"图片占位符服务"是干啥用的?当网站默认图片的背景?用这个图片设置长宽然后控制间距?
        24
    gucheen   2013-01-27 14:32:05 +08:00
    @m 有一些没有确定具体图片但是确实有这么一张图片的时候,就会用到了
        25
    hzlzh   2013-01-27 16:47:03 +08:00
    @m 正如 @gucheen 所说
        26
    isayr   2013-01-27 17:21:54 +08:00
    打开下载一个bin文件怎么回事
        27
    gucheen   2013-01-27 17:24:54 +08:00
    @isayr 请在网页中使用,不要直接打开,另外记得加http,我测试了一下。不加貌似不行
        28
    hzlzh   2013-01-27 17:41:45 +08:00
    @gucheen
    @isayr 由于是用于 <img src=""> 以及 background-img:url(),没有直接浏览的需要,我强制了http头返回的是下载内容。
        29
    sobigfish   2013-01-27 23:11:01 +08:00
    Bootstrap 现在用的placeholder.js 很帅
        30
    rannnn   2014-05-14 13:00:37 +08:00
        31
    Showfom   2014-05-14 13:02:36 +08:00
    @m 你这个 ID 卖吗?
        32
    hzlzh   2014-05-14 13:23:35 +08:00
    @rannnn placehold.it有限制 还弹验证码,无法容忍
        33
    MaiCong   2014-06-02 11:40:58 +08:00 via iPhone
    留名收藏。这类工具一直在用。
        34
    inee   2014-06-02 12:31:42 +08:00 via Android
    太棒!
        35
    XadillaX   2014-06-02 20:11:59 +08:00   ♥ 1
    @hzlzh 你也可以直接调用它:

    <script src="http://imsky.github.io/holder/holder.js"></script>
        36
    hzlzh   2014-06-02 20:15:08 +08:00
    @XadillaX 额外载入一个js是不是略显不优雅,大多数时候仅仅是想要一张图占位吧。
        37
    XadillaX   2014-06-03 11:01:00 +08:00
    @hzlzh 用额外的服务主要是怕指不定哪天就挂掉了你懂的 0. 0
        38
    emric   2014-06-03 17:09:47 +08:00
    颜色选项, 也是应该很重要的参数.
    例如两张图片折叠起来就看不见边缘了.
        39
    hzlzh   2014-06-03 18:32:54 +08:00
    @emric 是不是这样?我去加到demo里,实际上是支持 背景和文字颜色自定义的
    http://temp.im/123x456/f2f/fff
        40
    shiny   2014-06-03 18:45:00 +08:00
    我们都是用一像素的图片强制定宽高来实现 placeholder
        41
    emric   2014-06-03 19:43:21 +08:00   ♥ 1
    @hzlzh 之前没有把这个写上去, 现在清晰多了.
    好像今晚加载有时候会出现问题.
        42
    hzlzh   2014-06-03 19:48:09 +08:00   ♥ 1
    @emric 是的晚上我在更新demo,现在好了,取的 iOS 7 色盘。
        43
    tammy   2014-06-03 21:07:47 +08:00
    一直http://fakeimg.pl/
        44
    emric   2014-06-03 22:33:00 +08:00
    @hzlzh 文字有些时候并不会居中.
    例如这张: http://placeholder.qiniudn.com/100x50
        45
    hzlzh   2014-07-04 10:53:21 +08:00
    @emric 图片宽度不够情况下,字体导致的。
        46
    Mutoo   2014-07-04 11:01:05 +08:00
    图片点位符具体有啥应用?好处?
        48
    stonestyle   2014-07-04 16:45:58 +08:00
        49
    ximan   2015-05-03 10:05:53 +08:00
        50
    Showfom   2015-12-30 00:31:11 +08:00
    @ximan ?#.jpg
        51
    50vip   2015-12-30 11:27:36 +08:00
        52
    zgk   2015-12-30 12:05:35 +08:00 via Android   ♥ 1

    看到这图想起了 agar.io 这个游戏
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   875 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 24ms · UTC 22:46 · PVG 06:46 · LAX 15:46 · JFK 18:46
    ♥ Do have faith in what you're doing.