高速缓存背景图像 [英] cache background image

查看:133
本文介绍了高速缓存背景图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

是否有缓存背景图片的方法。



例如..
背景图片是3x3px,设置如下:

  body {
background:#000 url(bg.png);
}

当刷新发生时,背景图片闪烁

是否有跨浏览器解决方案? (对于Apache / PHP服务器,如果相关)






如果你去seo.hr并浏览导航,你可以看到我想做什么。




  • 是SSL吗?如果不是所有的浏览器缓存这个,但大多数现代浏览器。在这些图片上设置 cache-control:public (并过期)。

  • 这里真正的问题是你如何解决这个问题?不幸的是,这完全取决于您使用的服务器和/或框架。由于OP使用Apache,他们可以在Apache模块mod_expires上找到优秀文档找出如何调整其网站的缓存


    Is there a way to "cache" background image.

    For example.. Background image is 3x3px and it's set like this:

    body {
        background: #000 url(bg.png);
    }
    

    When refresh happens, background image "flickers" for second.

    Is there a cross-browser solution? (for Apache/PHP server if that is relevant)


    If you go to seo.hr and browse navigation,... you can see what I'm trying to do.

    http://www.seo.hr/

    http://www.seo.hr/usluge/izrada-stranica

    http://www.seo.hr/usluge/optimizacija-za-trazilice

    解决方案

    I think you need to determine first if the issue actually is a caching issue or if it's caused by the size of your image. You could use a program like Wireshark or Fiddler to do this, but to be honest it's overkill for your need and you probably already have a browser with developer tools.

    Here's how you determine where an image is coming from in Chrome (the other browsers are similar).

    1. Open your developer tools and go to the "Network" tab.
    2. Find "bg.png" in the list of network requests and click on it's name. Below is an example of having selected a stack overflow image from this page.

    Notice that it says status 200 (from cache). The browser didn't need to go out to the server and rerequire that resource. It used the cache. If that "from cache" text wasn't there it wasn't reusing cached resources.

    There is also the potential that you'll get a status code of 304. That means that the server said the image wasn't modified since the last request that you made. You do make the server trip in that case.

    Ok, so my image wasn't in cache... now what?

    There are a few reasons that this could occur.

    1. You're request headers aren't set to tell the browser to cache the image (also found in that same "Headers" tab that you would have seen that Status Code if the browser actually went to the server for the image). You'll want to set cache-control and expires to something that makes sense for you. Cache headers can get a bit complicated you may want to browse through this caching tutorial document.
    2. Is it SSL? If so not all browsers cache this but most modern browsers do. Set cache-control: public on these images (and also expires).

    The real question here is how do you fix this? Unfortunately, that's entirely dependent on the server and/or the framework that you are using. As the OP is using Apache, they can find great documentation on the Apache module mod_expires to figure out how to tweak caching for their site.

    这篇关于高速缓存背景图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

    查看全文
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆