I have a webpage with css, font, js, etc - and these files call other files.
If I use netlog.js phantomjs example, all files are requested successfully (ie response is received).
If I use my company script (1000s of lines), I don't get a font file.
When I look at the netlog.js output, the missing file is the very last received but it is the 4th of 9 in terms of requested - meaning I can see it is requested 4th but the response (page.onResourceRecieved) doesn't start until after all others have returned.
When I look at the company script, the missing file is not requested at all - hence it is missing. How can someone mis-program phantomjs to ignore this file so that it isn't requested? I assume that is the bug I'm hunting for.
In case the HTML/CSS is the culprit somehow, I'm going to include it below.
I have an html page that includes a css file via style tag (partial tag below)
<style>#import url(//fast.fonts.net/t/1.css?apiType=ad&projectid=2731384a-7cac-11e5-9c62-005056a60fc6&fontids=32RbV4zvBY&campaignid=HKyhF7DchmY);#import url(//fonts.googleapis.com/css?family=Montserrat:700&text=%2C-ABCDEFGHILMNOPRSTUVWabcdefghilmnoprstuvw);
The 1.css? request is correctly processed and the the next import of css?family is also requested. That second imported url requests another file: http://fonts.gstatic.com/l/font?kit=IQHow_FEYlDC4Gzy_m8fcqJ_SlhcvGEAn8FM2hC_Gzi8FMKbpN1MIaqg2HOsKpgsB-MyxXR1frCnhD4ZhVnHAATo_LDfaGo7fRovcW5LQvM&skey=11a939c399e8c9fe&v=v7
The netlog.js picks up the fonts.gstatic.com request - even if it doesn't come back until after everything else. The company script doesn't figure out it needs to request fonts.gstatic.com.
Netlog is very basic - it doesn't mess with timing, headers, or events. I think the company script is doing something to stop the request for fonts.gstatic.com once it is discovered by phantom via some setting or event but I don't know where to start.
I want to do something hackish in order to have responsive images generated automatically with js & php. I would like to do this with my css background-image: url(#/path/to/image.jpg), so that I can specify various image paths that javascript can grab but which won't actually result in separate HTTP requests.
The browser interprets the above code as http://example.com/cssfolder/#/path/to/image.jpg. Which means it is just pointing to the css folder. In my brief tests, if there is an index file in the folder the Chrome console will complain "Resource interpreted as Image but transferred with MIME type text/html" but if there is no index it will give a 404 message.
So that feels kind of bad, but it doesn't seem to affect the browsing experience. I guess developers may not like this method since it pollutes the console with errors, but is there an objective reason to avoid this? Are there some browsers that would actually mess up the page, bearing in mind that a real background image would be immediately supplied with javascript?
I have written simple rewrite rules that rewrite .cfm extension links (using outbound rules), and resolve to the full .cfm path with an equivalent inbound rule. Example:
This outbound link:
http://mysite/section/page
Resolves to this full path:
http://mysite/section/page.cfm
When I visit a link without the file extension, in any browser, the page displays on the screen but the browser still seems to 'wait' for the page to finish loading (get that spinning circle in the browser tab, while Firefox says "transferring data from mywebsite...")
After about 5 minutes of 'waiting' for the page to load, the browser will stop trying to load and displays 'cannot display the page' error. I used Firebug's NET panel to see whats going on and basically the page never finishes loading (the size of the file remains 0kb until the browser falls over).
If I go to a fully qualified path page e.g. http://mysite/section/page.cfm then the page loads completely within about 20ms and Firebug gives me the size of the page.
Can anyone please suggest whats going on and how to fix it?
OK I have somewhat solved it, or actually solved it.
Its a ColdFusion issue. If anyone else if facing this here is what you do:
Create an Application.cfc page.
Add this function to your component:
<cffunction name="onRequestEnd">
<cfheader name="Content-Length" value="#Len(getPageContext().getOut().getString())#" />
<cfset getPageContext().flush()>
</cffunction>
So what is happening here is that we are setting the Content-Length header to a correct size because ColdFusion messes it up if you let it do it itself. The cure to ending the never-ending page load is to put the getPageContext().flush() after setting the Content-Length so that the browser gets all the page content.
Frankly I made it work with some Google searching and random hacking. It may not be the correct way to address the problem (because in Firebug it says there is a 500 error going on) but it seems to work.
I have been using a central CSS file to build my site and have added to and modified it over time. I use cloudflare which caches CSS files every few hours, so to avoid this I change the number on the end of the file name each time and update it in my header template. This worked fine for months on two different servers.
But just recently it has decided not to allow this. If I change the CSS's file name and reference link, the CSS will not load. If I set it back to what it was before (site_main61.css) then it works just fine. I've even tried using different characters than increment numbers at the end and still end up with the same result.
This started happening out of the blue; no changes had been made to the server. Could this be a problem with Cloudflare? Something else?
I can provide more details if needed, but I can't think of anything that would be relevant right now.
The problem is not related to forgetting to update the link in html. I've tested this countless times to be sure.
You can add a query string the to end of the file name. It will be cached as a separate file, but it will be the same filename. It's basically a forced recache for the file. Just go to the link in the HTML and add something like this:
<link href="path/to/file/site_main61.css?version=1" ... />
This will work with most caching systems and you no longer have to change the file name.
We're having a weird problem at work that happens only in chrome. It looks like the css file is getting cached and the content of this file isn't getting re-downloaded.
The problem is that when using a fresh session for example "private session", the image "mainSprite.png" isn't getting displayed.
After some tests, I believe the problem is related to us doing redirects at the beginning if the user isn't authenticated. From what I understand, it might not complete the download of the sprites linked inside the css files. It will cache an invalid object as soon as the redirect starts and then on the following pages, it will fail to display a correct image since it cached something wrong.
The strange thing is that it actually loads the image completely at some point. But it looks like it's not refreshing it in memory...
I did a timeout of one second before starting redirects on first load and images correctly display. This is a quick fix and I can't expect every computer to load in 1 second every images contained in the css.
edit
As far as I can say, it really looks like a race condition. I changed the order of loading. We use require.js. Instead of loading js after css, I start js loading before. And images are getting loaded correctly now on my local server.
if someone is interested to look into it:
http://api.checklist.com
edit 2
When images aren't visible, opening new tabs will have the same problem. Closing the browser and reopening it will work on first load and images isn't being downloaded but loaded from Cache which means that before closing the browser, the image was indeed downloaded.
It looks like the problem coming from your redirects unfortunately i couldn't see your example ( link won't open ). Google chrome has indeed issues with caching it's annoying during development time ( clear up the cache, load new image, do the same for new image..), if you need to clear your cache try the folowing:
try to go to
chrome://chrome/settings/clearBrowserData
in your chrome browser and check the options:
Empty the Cache( i have also Clear download history and Delete cookies and other site and plug-in data )
click on 'Clear Browsing Data' button it should
All what you need to do is to trace your cash list via chrome, and from what I see is that you got this error which make it not cached:
Uncaught TypeError: Object [object Object] has no method 'placeholder'
So if you want to trace, you can use the manifest offline mode or you trace via your code.
Just following and test your page, I did catch where the error is:
file: scripts2.js Line 20 --> $('input[placeholder]').placeholder();
which you need to check the name of the place holder and change it here in this tag.
Thank you
I assume your server/backend app has routes set up. Like this Play! framework example:
# Ignore favicon requests
GET /favicon.ico 404
# Map static resources from the /app/public folder to the /public path
GET /public/ staticDir:public
# Catch all
* /{controller} {controller}.index
According your summary I suggest to set up a static folder route (where the images are) in config file or htaccess as you want, then check image url in browser url bar (with empty session). That should work!
First I would suggest that you first try to find ways to narrow the redirects. If it possible I would suggest that it would be much more advisable to try to create your content dynamically based on your users authentication using languages like PHP or ASP (just to name two).
The classic way of disabling the caching on a webpage is to set two <meta> tags inside of your <head> </head> tags. However, you should note that these are technically not "correct" as they are not part of any of the "offical" standards documentation. This also means that I would again lean towards my first suggestion of finding a better delivery system which in turn should prevent the problem.
So for "testing" purposes the tags would be:
<HEAD>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="0">
</HEAD>
Maybe I don't understand your question or dilemma (maybe because of lack of explanation or because I can't see your page at that link since I run Chrome), but there's an example I ran across here that works in Chrome by just using Javascript/jQuery to load, instead of CSS:
http://jsfiddle.net/2Cgyg/6/
Use image at URL: http://www.w3schools.com/cssref/img_tree.gif
And although the accepted answer didn't work for me in Chrome, this is the question I got the jsFiddle above, from:
Load Image from javascript
All the caching, etc. is unnecessary, and even something you wouldn't want to do if your images are ever updated to something else - they won't appear without forcing a refresh which you can only do through altering the file name like this to avoid users not seeing your updated image:
myPic.jpg?MMDDYYYY
And you could set the date according to the date you are modifying it.
clean your browser history like cache,cookies
clean the temporary internet file
if problem not solved then reinstall browser your problem is solved definitely