Welcome to WebmasterWorld Guest from 18.207.137.4

Forum Moderators: not2easy

Message Too Old, No Replies

image not loading every time

     
9:46 pm on May 14, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 2, 2006
posts:2241
votes: 8


I have a website made in Bootstrap 3. I noticed that the image I use in site's header does not load every time I switch between the pages. The header image comes from a single template that applies to all pages across the site. Here is the HTML code:
<div class="container-fluid">
<img class="image-center img-responsive header" src="../images/image.png" alt="Example"/>
</div>


Custom CSS:
.container-fluid{padding-right:5%;padding-left:5%}
.header{margin:0 0 10px 0;}
.image-center{display:block;margin-left:auto;margin-right:auto;}


Caching is set in .htaccess:
expiresActive On
# Cache files for 7 days -- forced revalidation
<FilesMatch "\.(gif|jpe?g|png|bmp|js|css)$">
expiresDefault A604800
Header set Cache-Control: "no-cache, must-revalidate"
</FilesMatch>


Can any of the above cause an image not to load?

Thanks
9:59 pm on May 14, 2015 (gmt 0)

Junior Member

5+ Year Member

joined:June 6, 2012
posts: 104
votes: 0


The first thing that I notice is that you are overriding the margins on the image with the header class. I'm not sure about the .htaccess.
11:19 pm on May 14, 2015 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4527
votes: 350


Yes, the caching is disabled. Although you are setting a one week cache, you are negating or unsetting the caching with:
Header set Cache-Control: "no-cache, must-revalidate"
That isn't the only reason it can fail to load, but the most likely from what you've posted.
This line:
expiresDefault A604800
says "cache for one week". To set a further expiration - like a year - you could use
ExpiresDefault A29030400

and try replacing
Header set Cache-Control: "no-cache, must-revalidate"
with
Header append Cache-Control "public"
11:24 pm on May 14, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15898
votes: 876


The first thing that I notice is

The first thing I notice is that the CSS uses a relative link. Are all pages in the same directory? (URL, not physical location.)
4:09 pm on May 15, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


Ditto to what lucy24 said. That was the first thing I noticed as well, and where I'd start looking. I generally avoid using path-relative links in favor of root-relative links, like:
src="/images/image.png"
4:34 pm on May 15, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 2, 2006
posts:2241
votes: 8


Thank you.

Image link is in HTML code, not CSS. I've never had trouble with relative links in HTML. In this case, other images are linked in the same way, and they always show up - always.

I thought into Apache caching, same would apply here I think: If there's a problem with it, other images would behave the same as well.
I looked around WebmasterWorld, this code should be ok.
[webmasterworld.com...]

What about that Bootstrap CSS that uses before and after on .container-fluid class?
Could any of these CSS settings for ::before and ::after affect it in the way so it does not show up:

display: table;
content: " ";
box-sizing: border-box;


Thanks
4:49 pm on May 15, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15898
votes: 876


Edit: Post written before the one immediately above mine, darn it.

I should add that I read the first post too fast, and now realize that the relative link is not in the CSS but in the HTML. Relative links in HTML can be appropriate if you have material that will always move as a package, so the relative link remains valid even if all URLs have changed. Relative links in CSS give me the fantods, primarily because I can never remember whether it's supposed to be relative to the CSS, or relative to the page using the CSS. (If you have to look something up every single time you do it, you should probably not be doing it ;) )

But as long as we're here... If the image is used consistently in all pages in an element of such-and-such class, wouldn't it be more efficient to define it as a background-image in the CSS instead of saying the same thing in every page's HTML?

Further edit: A "content" declaration in CSS won't override the explicit content given in the HTML. The terms ":before" and ":after" are a little misleading; they really mean "at the beginning of (but inside) the element" and "at the end" etcetera.

[edited by: lucy24 at 4:53 pm (utc) on May 15, 2015]

4:51 pm on May 15, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


I'd probably start by using your browser developer tools. Personally, I prefer Chrome (though IE's are similar). Press F12 to open the tools. Navigate to your page. Look at the network tab to see what HTTP headers were returned and whether or not the image was returned. If it looks fine in the network tab, then use the tools to inspect where you think the image should be. From there, you can inspect various elements in the DOM and see what styles are being applied. That might provide some insights into what's going on.
5:21 pm on May 15, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 2, 2006
posts:2241
votes: 8


If the image is used consistently in all pages in an element of such-and-such class, wouldn't it be more efficient to define it as a background-image in the CSS instead of saying the same thing in every page's HTML?

It's one spot in a template vs. one place in a single CSS file. I don't argue at all, but what's the difference?

Personally, I prefer Chrome (though IE's are similar).

...and this helped me figure that the problem happens in Firefox only (I use it the most). Using Firefox in a safe mode could not reproduce the problem.

Still, I wonder why the header image only. I'm yet to figure which add-on is causing the problem.

Thanks a lot to all of you.
8:35 pm on May 15, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15898
votes: 876


what's the difference

The difference applies to the human user, not to you, the site designer. A person who reads more than one page will only download an external stylesheet once, assuming normal caching. The HTML is loaded with every page, including the parts that are identical to other pages' HTML. (The image itself will normally be loaded just once either way, again assuming normal caching.)

So it's exactly the same principle as putting anything in an external stylesheet instead of saying it over again on every page. When using a CMS there's also a saved nanosecond or two because the <img> lines in the HTML don't have to be built over again on each request. Admittedly that part is trivial unless you're nibbling at the very limits of your host's RAM quotas.
4:49 am on May 16, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 2, 2006
posts:2241
votes: 8


The difference


I agree, no matter if it's only about nano-, milli- or whatever. Simplifying is good if it does not affect anything negatively.

Thanks for all of the input in this thread.

Cheers!