I have a website which works fine in all browsers except in IE6. The pages content is inside a div loaded with a background image. The page layout gets very nasty and image does not load when the page is opened for first time, but when the same page is opened for the second time and any subsequent times, then it loads perfectly. This scenario is with every page in the site.
Please help.
You might be suffering from FOUC. (Flash Of Unstyled Content) whereby IE6 for whatever reason isn't rendering your content correctly on the first load. (we would need to see sample code or a URL to determine why)
The 2nd - Nth reloads may work well once some of the content is cached by the browser.
updates
Ok, now seeing the site a few more details. The div that loads the new content is floated over an animated flash background... and the divs appear to use a png image background with transparency (IE6 doesn't support PNG Alpha (the part that does transparency)) thus IE loads an ugly image first, and then it looks like you have a hook in there to swap it out with a filter in IE. (I'm kind of guessing at the moment as the PC I'm on with IE6 is rather slow and the flash appears to be very cpu intensive)
Since this PC is slow, I see the text/form content load before the background image... I'm wondering (if you are applying a filter in IE6, if that is being executed before the image is fully loaded and thus the end result looks odd) but due to browser caching, the 2nd/Nth loads are ok?
I need to dig a bit deeper, but I don't have all the tools I need here. Hopefully later today I can check this out a bit more (or someone else will)
Related
This is such a bizarre thing that even just typing in the title makes me question my own sanity. Anyway, I'm trying to figure out why my reports are taking so long to load and I've discovered that Chrome is loading an image of my page, after the page has finished loading. But don't take my word for it, check this screenshot from dev tools.
You can see that there are two instances of report.test.php being loaded. The first one is a document and the second one is an img. (You can tell by the icon and also by filtering the list on those two types).
So in this example the report is small and loads about 15 rows of data and renders them in an HTML table. This is done after 710 ms (in this example) and it all looks good except that the favicon in the browser tab keeps spinning for another 808 ms while that img loads. Not a huge deal on a small report like this one but if you load a lot more data that takes, for example, 6 seconds to load, then this second image also takes an additional 6 seconds to load for a total of 12 and that's a big deal.
Now as I said, when the document is finished loading I can see that the HTML has finished rendering so I can essentially use the report and ignore the spinning favicon, but this causes problems if I try to load another report, in another tab, while that favicon is still spinning. It gets jammed up and basically brings everything to a grinding halt and it's all bad. Bottom line, I need to stop this from happening.
So what is this img version of my report? Why is it there and can I prevent it?
Turns out chrome was generating its own image because I told it to use a blank background image in my body style.
Background
I had added background:url('') to the body tag of the reports page.
<body style="background:url('')">
I did this because the stylesheet I was using at the time added a background image, which I wanted for every other page in my app but not the reports page, so this was my way of overriding the style sheet.
Solution
Anyway, apparently when you submit a blank string as a background image chrome then generates its own image and it does so by making an image of the entire page, and the more HTML on the page the longer it takes to generate this image.
The solution is to not pass in a blank string to background:url.
I have several high-resolution images that I am using on my website. I am using PHP to echo the images. I specify a width of "30" for each of the images, which correctly sizes them.
The problem is that for SOME of the images, there is some sort of automatic conversion to data URI - which seems to cause the images to not only be resized to 30x30, but also to have a resolution of 30x30.
This seems to happen when I refresh - almost like it is caching the php after the first execution, then on refresh, it thinks the image file size is actually 30x30.
See images below - the first image is the first time I visit the website and screen captured on my iphone. Then I refresh, and the second screenshot is the result. Notice that the apple image remains crisp on both, while the rest appear blurry. All of the original files have approximately the same resolution.
Additionally, if I view the apple image (after refresh) in it's own window, it shows this:
.../logos/30xNx50de0713c94d847...
Whereas if I view the "dicks sporting goods" image in it's own window, it shows this:
data:image/jpeg;base64...
I am not specifying any kind of data URI conversion - would it be something on the server that does this automatically? And why for some images but not others?
Thank you for your time.
I determined this was a result of PageSpeed being enabled on my host. PageSpeed is a Google product that optimizes the loading of pages - and in this case, transforms images based on the width that is specified in the img tag.
By adding
?ModPagespeed=off
to the end of any page, it disables PageSpeed and shows the images at full resolution. I took this approach rather than disabling PageSpeed entirely, because I want some of my pages to take advantage of the optimization.
I'm printing a page of my PHP application with the ( ctrl + P ) (default printing). How can i make sure that the CSS (tables, padding, cellspacing, background picture with opacity) are printed along on the sheet. I'm calling the CSS from another file.
Thanks for your help and time.
You must add this
html{-webkit-print-color-adjust:exact;}
To any css file of the project, ideally the print one, as the others won't load when printing. It will force chrome to use every background color and image exactly as coded.
Add this to your HTML page. Now you need to adjust your page manually, for fitting it to the print page. (use the preview function in Chrome)
<link rel="stylesheet" media="print" href="print.css">
The interesting part for the browser is media=print
You can find some more style commands for printing web pages here:
CSS How-to: Optimize Pages for Printing Using CSS
Printing a Book with CSS: Boom!
complete css guide - Printing
CSS Paged Media - #page Rule
You will need to include a print stylesheet, as detailed by Dan Lee. However that's only half the answer. The other half is that Chrome (and Safari) have poor printing options, and cannot print background-images, or background-colors. I had to figure this all out when trying creating a printable version of FullCalendar that used colors to differentiate between different types of calendar entries.
I include these directions for printing:
Firefox has the best print output, Internet Explorer is second.
You may want to turn on the Print Background option in your browser: In Firefox or Internet Explorer: Go to File -> Page Setup -> Check Print Background (colors and images)
Although Chrome and Safari will work, they do not have the print background options. It will be difficult to differentiate between the types of entries on the calendar.
If your page is simple enough, you can sub in actual <img>s instead, and use CSS to stretch and position them behind any text that might be in the div or td. That wasn't possible for the FullCalendar project I did, but it works fine on a simpler table. It's compatible with Chrome, Firefox, and IE, and doesn't require users to toggle a specific option to get the correct output.
This is as of Chrome 17.0.963.83 and Safari 5.1.4 on Windows.
I know that the question I have is quite complex, and I really hope someone can help me. I have created an image gallery qih jquery and php. Firstly I am grabbing all the image names from a MySql database, then taking them from the server folder and resizing them with php. It creates the thumbnails, then I created a pop up window with jquery which shows the image in large. After that I place a previous and next button and told jquery to grab the array of image results from php and echo them into the jquery using json. Then it goes through the array to create the next and previous effect. I then centered each individual image when the next and previous button were clicked. When you load the first and second picture it is not centered and it goes to the right. I CAN NOT figure out why this is happening. I really need some help here. There is too much code to post here so I am giving you the website and you can see pretty much everything in the source code. Remember that I am using php so if you are wondering how it is iterating through the pictures that why. Thanks if anyone can help me at all.
http://www.oceanphotostudio.com/test/collection/before-and-after.php
The reason it's getting offset is that the margins that center the popup div are being calculated before the image is loaded. Notice that on the first click, it will have margins of -37px and -30px. After one image is loaded, calling another one will use the width and height of the last image that was loaded in, which is why you can get unpredictable results.
Take a look at JQuery's load event handler for information on how to create a callback to resize after the image has been set to load, rather than before.
Your description totally overcomplicates the issue. Browser could care less how you generate the array or html on server, or what language it is
Your position problem is a simple css issue. You've set the top and left of your popup to 50%. This means top left corner of popup will start at dead center of page, and go right and down from there.
Use a browser console to inspect the html elements and the css rules that apply to them and adjust accordingly. WIthin the console you can make live edits to see impact of the adjustments in real time
So I have my own webpage here, which is a sortable thumbnails page. The load() event activates each thumbnail when the first related image is loaded. Since I'm grabbing <img> tags and text content from a hidden div on the page, the thumb activation prevents the user from clicking through to a yet-unloaded image and then waiting while the preload takes place in the background.
The call is pretty simple:
$('#content img:first-child').load(activateThumb).each(function(){
if(this.complete || this.complete === undefined)this.load();});
the .each() catches any cached images and manually triggers the load() event. Worked great and was a fast and lean website. Now, as the site continues to grow, there are over 100 <img> tags in the single HTML file and I'm wondering if there's a conventional limit that I'm approaching. Should I split the page onto 35 different html files? Should I lose the tags and the slick preloading effect in favor of a server-side request for the images on demand?
What's your instinct, as a good programmer?
Well there is no clear limit. You can continue doing the way you have done on your site for as many images as possible.
But it's just that the user might get frustrated while waiting for all the images to get 'activated'.
So in turn what you could do is to have pagination & display say 20 images per page. This way you make the image loading relatively faster.
Also after you load page1, if the user is still in page1 you could start pre-fetching page2. So as the user clicks page2 he sees a very responsive site :)
There is no one rule here. In fact if you see Google Images now a days they do something like what you have done.
You can do it like many Web 2.0 sites do it:
In the beginning, load the images displayed on currently visible part of the page.
Then load other images when user scrolls the page down.