I have a site utilizing a background image that resizes to the window's size. This is achieved by placing an <img> in the body, and some custom CSS ( Technique #2 ).
I use a simple conditional statement in the header to determine which image to display:
<?php if (is_single(array(11,24,26,28,30,36))) : ?>
<img src="http://www.lookingglassstudio.ca/wp-content/uploads/2011/08/weddingsbg.jpg" class="bg" />
<?php else : ?>
<img src="http://www.lookingglassstudio.ca/wp-content/uploads/2011/08/stylingbg.jpg" class="bg" />
<?php endif; ?>
My problem is, the image reloads every time I refresh or navigate somewhere else. This results in a flash of white. See the website here!
I reckon the php script calls the image each time, resulting in the 'flash'.
Any way around this? Ways to make the image cache and not reload each time?
EDIT
I believe the issue is a FOUC problem. Will flash the background color (default white) when refreshed, causing flashes. FOUC fixes don't seem to help.
Issue occurs even with PHP conditional statement removed. Issue occurs when <img> is changed to background-image.
I noticed this question a while ago but hoped you'd get an answer that worked for you.
Seeing as nothing has worked for you so far, I have one piece of advice: When you save your .jpg files (the big background images), you might want to save them in "progressive" format if possible.
http://en.wikipedia.org/wiki/JPEG
There is also an interlaced "Progressive JPEG" format, in which data
is compressed in multiple passes of progressively higher detail. This
is ideal for large images that will be displayed while downloading
over a slow connection, allowing a reasonable preview after receiving
only a portion of the data. However, progressive JPEGs are not as
widely supported, and even some software which does support them (such
as some versions of Internet Explorer) only displays the image once it
has been completely downloaded.
Instead of loading the image in a line from top to bottom, it will instead "progressively" become clearer and less pixelated, so you won't see the FOUC as much with the background visible behind it.
Besides this, make sure you provide a background color that won't heavily contrast the image, and try to compress the file size as much as your design can withstand.
I checked your website and found everything to be working as expected. When the browser requests the page with an empty cache, the image will take a few seconds to download. When you navigate to any other page of the website, the browser fetches the image from the cache -- I do not see any flash on FF4, nor I see the browser requesting the stylingbg/weddingsbg image more than once per session.
If you notice that the image is loaded every time you visit the page then probably your browser cache is disabled (or incorrectly configured). The server does not seem to send the Expires header; explicitly specifying an the expires header might help in certain cases.
Also note that some browsers request all resources from the scratch when you hit refresh. Modern browsers (I checked on FF4) will send an If-Modified-Since header, a sensible server will only return a Not Modified response hence no flickering.
Apart from that, I suggest that you add a CSS background color to your page that matches the tone of the background image. This helps in situations when images are disabled or take long time to load. Also consider #Wesley's suggestion about using progressive images. Your current image loads from top to bottom. You can improve the user's experience by converting the image to progressive JPEG.
Use CSS instead.
<style>
body.weddings {
background-image: url('http://www.lookingglassstudio.ca/wp-content/uploads/2011/08/weddingsbg.jpg');
}
body.styling {
background-image: url('http://www.lookingglassstudio.ca/wp-content/uploads/2011/08/stylingbg.jpg');
}
</style>
Then in PHP:
<?php if (is_single(array(11,24,26,28,30,36))) : ?>
<body class="weddings">
<?php else : ?>
<body class="styling">
<?php endif; ?>
I've discovered the source of the issue, and I appreciate previous comments as they have helped immensely!
The problem is Wordpress 3.2, and underlying conflicts with jQuery. These conflicts result in the return of the dreaded FOUC in webkit browsers and sometimes IE.
There is no perfect solution, but all three of the following have greatly helped:
1.) Placing an empty script call right before the javascript call helps 'kickstart' the stylesheet, greatly reduces duration of FOUC white flash.
<script type=”text/javascript”></script>
2.) Downgrading to jQuery 1.4.4. Found here. Evidently the issue is with newer versions of jQuery and WP 3.2 conflicting. A way to do this without affecting admin functions is to add the following to the functions.php file in your theme:
// Downgrade to jQuery 1.4.4 in order to support jQuery Tools
function downgrade_jquery() {
global $wp_scripts;
// We want to use version 1.4.4 of jQuery, but it may break something in the admin so we only load it on the actual site.
if ( !is_admin() ) :
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', false, '1.4.4');
endif;
}
add_action( 'wp_head', downgrade_jquery() );
3.) Utilizing a similar background color to match your image, as recommended above by Wesley Murch and Salman A. I haven't tried progressive JPEG format yet, but I imagine this would help as well.
The combination seems to almost eliminate the FOUC for Wordpress 3.2, and provides a solution, at least until developers eliminate the problem in future versions.
I'd like to alter the title to more accurately represent the problem I was facing.
Related
I have a strange issue with a particular image URL.
First of all please visit this page with your clean cache (it's an under development Reddit clone in Turkish language, anyway...)
So, the thumbnail image didn't show up right? Nothing, just whitespace right? I mean no thumbnail image unlike this page right?
This is how we are loading the thumbnail image:
<div class="link-thumbnail" style="background-image: url('http://www.herkesebilimteknoloji.com/wp-content/uploads/2017/01/dunya.png');"></div>
Now please visit the image directly with your browser and return back to the problematic page. This time image showed up right?
Eventually my conclusion is; background image is not showing up unless it directly visited and cached by the browser.
So what is the mechanism/reason behind this? As you can imagine by just looking to URL, image's host is a WordPress site. So what could be the trick to prevent this image to load by background-image: url('...') By the way it's loading the image perfectly with <img> tag.
I know some wallpaper web sites doing similar trick but none of them were giving away the image directly without doing a redirection trick. I believe this case is not similar.
And last but not least; how can I handle such a case when using background-image ?
You are loading this image from a different URL / wordpress system. It seems like Wordpress itself prevents images within its "file system" to be loaded as background images from other URLs.
But you can just save that image, put it on your own site and load it from there.
My image thumbnail links to the full size image. Now only the image is showing up as some sort of code. I have been using the same HTML editor for years, all the pages are the same. It is only this group of 5 pages that have thumbnails. Take this link for example:
ÿØÿáExifII*ÿìDucky2ÿáyhttp://ns.adobe.com/xap/1.0/ ÿíHPhotoshop 3.08BIMZ%G8BIM%üá‰È·Éx/4b4XwëÿîAdobedÀÿÛ
I also discovered that if I get this code an then go up to the history and click on the name of the photo it pops right up as it should have been. I have no idea how to fix this. I have uploaded the photos several times with two file managers, used other photo software aswell. My editor shows that these pages are fine, but IE shows that the pages have no style and all browsers show the linked image problem.
I know this doesn't make much sense to you professionals, but this is my business website and a customer told me about the problem. After 8 hours of trying to fix this I am hoping you could help.
The problem:
This problem occurs when an IMG changes or got touched (by adobe, in your case) AFTER it was uploaded to the server and the name of the new (or modified) IMG remained the same. The image shown does not get refreshed. The old image is still shown, even though the database holds the right image. I have narrowed it down to the fact that the IMAGE IS CACHED in the web browser. If we hit the RELOAD button in Firefox/Explorer/Safari, everything gets refreshed fine and the correct image just appears.
I verified that on your site running the following:
function is_cached(img_url){
var imgEle = document.createElement("img");
imgEle.src = img_url;
return imgEle.complete || (imgEle.width+imgEle.height) > 0;
}
And then I called this function which returns true or false depending on cached or not:
is_cached("photos/back_to_school_pr5_tn.jpg");
And the result came back as:
<- true
Remember: When uploading an image, its filename is not kept in the database. It is renamed as Image.jpg (to simply things out when using it). When replacing the existing image with a new one, the name doesn't change either. Just the content of the image file changes.
Solution one - No code required:
Since you are not in the coding business (as you claim), all you need to do is to rename the IMG after it's been touched by adobe.
Whenever you modify a photo in adobe or you upload a new IMG you should give it a new name since the older version of the IMG IS STILL IN CACHE.
Solution two - Coding required:
If touching the IMG with adobe is a constant thing that you do after you upload the original picture, then the above solution can be an hassle, so you might want to look into ways to force the web browser to NOT cache images from this page.
NOTE: This solution is only good for the future. In your case, the IMG is already cached.
Besides, this will only work if the actual IMG is inside your HTML, but on your site the link takes you to the actual IMG.
Solution three - Coding required:
An important addition to the above solution is that you can never force a browser to do anything. All you can do is make friendly suggestions. It's up to the browser and the user to actually follow those suggestions. A browser is free to ignore this, or a user could override the defaults.
So the best long-term solution will be to save the filename with the database. This way, if the image is changed, the src of the IMG tag will also change.
For example:
<img src="picture.jpg?1222259157.415" alt="">
where "1222259157.415" is the current time on the server. (Note: I used python's time.time() to generate that)
I created a new repo and uploaded all the files but the images in my div id="Container" inside my index files are not showing up. https://github.com/hkhan194/tres-chic/tree/gh-pages
I looked into all other questions regarding this matter and tried them but still no image showing.
#Hkhan I have tried the link in IE and Google Chrome,
In IE:
Your website is working fine, the images are getting displayed.
In Google Chrome:
The images are not getting displayed and when i checked the console ,I am getting this error
Error:
Mixed Content: The page at 'https://hkhan194.github.io/tres-chic/' was loaded over HTTPS, but requested an insecure script 'http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js'. This request has been blocked; the content must be served over HTTPS.
Solution:
It seems that Google chrome is not allowing acceptance of the script from the url you have mentioned for the JS.
So the "mixItUp is not a function" error is getting thrown since the mixItUp function is from the former JS file.
So you could save that javascript file as "jquery.mixitup.min.js" in your github in a specific path and then include the javascript in the tag in your index file as shown below,
<script src="Your path/jquery.mixitup.min.js"></script>
First off, this isn't really a GitHub pages question. GitHub pages simply hosts your files. This is really a question about the HTML.
Secondly, you'll have much better luck if you post a MCVE. In your case this would be a smaller test page that only displays a single image.
That being said, I recommend going to the resulting HTML file: https://hkhan194.github.io/tres-chic/
Right-click anywhere in that page, and then go to "Inspect Element". That will open up a window that lets you explore the page elements, see any errors you're getting, and see what's going on over the network. I'm using Chrome, but every browser should have something very similar.
On the Network tab, notice that some of your image files aren't being found. These seem to be the result of misspellings: JPG or jpeg instead of jpg, that kind of thing.
Then on the Elements tab, find your products grid. Notice that its height is 0, which doesn't seem right. Then go into the div class="mix category-*" tags and notice that they all have a display of none!
The problem is that your CSS is setting #Container .mix to display:none, which is going to prevent them from being shown.
Please try to get into the habit of exploring your page using this window, and try to understand the difference between what GitHub Pages is doing and what your HTML is doing. If you have further questions, please try to narrow your problem down to a smaller example page. Good luck.
I started making a website, then I realized that I was pasting the top menu all over the html pages from the website. This isn't the best way to do that I thought. So, how do I manage to have the same menu on all the pages I want, without pasting this information all the time.
Is that possible to store "head" tag information too? Because the html code looks a little messy with so many things up there all the time.
Sending a portion of html code to browser cache is possible? I know that browsers sometimes do that with favicon or background images.
Doing that seems quite... Useful, because the user will not load the "same stuff" every time he access the pages. Despite to the fact that if you send something to the cache, you need to clear the browser cache to see the effects if the content has changed.
You have to use php function include().
Example:
header.php:
<h1>My header</h1>
otherpage.php source:
<?php
include("header.php");
?>
rest of the page...
otherpage.php output:
<h1>My header</h1>
rest of the page...
I'm having a little challenge here. After changing banner images on some part of my homepage, it the new images don't show even after clearing cache and re-indexing. Can someone please advise me.
You could try adding a version number to the image path in your code, as detailed in this answer: Is there a way to force browsers to refresh/download images?
You just need to add ?1 at the end of the url like so:
<img src="image.png?1"/>
This normally happens because you need to clear your browser cache on whatever machine you're viewing the site with - a fast and easy way to find out if this is the case would be to throw your browser into private/incognito mode and refresh the page.