是否有现成的解决方案可以根据浏览器分辨率发送部分隔行扫描 JPEG?

发布于 2024-12-12 22:12:24 字数 501 浏览 0 评论 0原文

我问你是否知道是否有现成的解决方案,而不是真正如何去做。

我非常确信我可以自己完成它,即使我从未手动接触过 JPEG 的字节。如果您想破解它,我们邀请您这样做;)

基本想法是您有一个包含一些 JPEG 图像的网站,但您希望尽可能减少移动用户的负载。

因此,您确保所有 JPEG 都是渐进式的,并且仅首先发送低频位,空闲 TCP 连接,并等待客户端报告浏览器窗口中的可用空间有多大。

或者,您有某种 browsercaps.ini 或类似文件,并依靠它来获得初始解决方案 - 然后让记者在必要时报告更正。

我实际上需要两个完全独立的环境,一个使用 PHP,另一个使用 Node.js(后一个更重要)。

我非常确定 picasaweb 已经在做这些事情了,或者至少已经做了。你可以查看一张图像,它会逐渐加载——然后你可以放大它,它变得块状,但会继续逐渐加载,我记得我对此印象深刻!

(谷歌为自己保留很酷的东西,这是不公平的,记住他们的座右铭{°«°])

I'm asking if you know if there is a ready-made solution, not really how to do it.

I'm quite sure I can pull it off myself, even if I never ever touched the bytes of a JPEG manually. If you'd like a crack on it, you're invited to do so ;)

The basic Idea is that you have a site with a few JPEG images, but you want to reduce load as much as possible for mobile users.

So you ensure that all of your JPEG´s are progressive and only sends the low-frequency bits of it first, idles down the TCP-connection, and waits for the client to report in how big the available space is in the browser window.

Or alternatively, you have some sort of browsercaps.ini or similar, and rely on that to get the initial resolution -- and then have the reporter report a correction if necessary.

I actually needs this for two entirely separate environments, one is using PHP and the other is using node.js (The latter one is of more importance).

I'm quite sure picasaweb is doing this stuff already, or at least did. You could view an image, and it loads progressively -- then you could enlarge it, it got blocky but continued to load in progressively, I remember that I was quite impressed by that!

(And its unfair that Google keep the cool stuff for them selves, remember their motto {°«°] )

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

冷情 2024-12-19 22:12:24

为什么不向客户端发送可用于特定 img 标签的图像列表,然后让客户端确定应该使用哪一个?

可以确定设备的屏幕尺寸 document.write(screen.width+'x'+screen.height);浏览器的大小。并且不是为每个图像添加 src 属性,而是将可能的源添加到 html5 data- 属性,如下所示:

<img data-img="mobile:some-img.jpg,desktop:other-img.jpg" />

JavaScript(使用 jQuery):

$('img').each(function(){
    $(this).attr('src', $(this).attr('data-img').split(',')[0].split(':')[1]);
});

Why not send the client a list of images that could be used for a specific img tag, then have the client determine which one it should use?

It is possible to determine the screen size of the device document.write(screen.width+'x'+screen.height);or the size of the browser. And instead of adding a src attribute for each image, adding the possible sources to a html5 data- attribute like so:

<img data-img="mobile:some-img.jpg,desktop:other-img.jpg" />

JavaScript (With jQuery):

$('img').each(function(){
    $(this).attr('src', $(this).attr('data-img').split(',')[0].split(':')[1]);
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文