I'm using jQuery $("#my-image").attr("src", "/img/...") (and also .css("background-image", "url()")to show some images. I now discovered that Chrome redownloads the file completely every time the page is loaded or even the js is executed. This shouldn't happen. Why is the cache not used? In Firefox it works like it should. Any ideas?
Related
I made a script which is working fine on Chrome but doesn't load in Firefox. I tried on another PC, and here it works on Firefox but not in Chrome. Clearing cookies makes the script load again.
What can it be? I don't think its the script since its working.
I am using a JavaScript library to arrange few images on the webpage. The following browsers:
Firefox
IE 11
Microsoft edge
render the page as it was planned, the problem occurs with Chrome browser. It messes up the complete layout.
The above browsers don't load any content unless all the images have been downloaded, until then it shows a blank white screen, and all of a sudden it will show all the content rendered perfectly. And in case of Chrome, the browser displays content on the go, as in you can see the images appearing in a scanline fashion.
I've tried calling the function that arranges these images inside:
$(window).load(function() {})
and it didn't fix the issue, I tried calling this in the <head></head> and also just before closing </body>, that didn't fix it either. Is this a Chrome related issue?
What should be the correct point in time where the function should be called?
There is a nice library on the web with a comprehensive name imagesLoaded designed to fix your issue! It is supposed to work cross-browser of course, so no differences in behaviour in Chrome or other browsers.
With its help, you can run your code at the moment when all images loaded in specific DOM element or elements controlled by jQuery selector. Like:
$('body').imagesLoaded( function() {
// images have loaded
});
There are also .done, .fail, .progress callbacks supported if you need, so check the docs.
In some cases you have to wait until the image loads to get a parameter not specified in the <img> tag, such as height for example. Then you may use $(window).load
In other cases, for example, adding some classes to the images, you can do it before the image load.
If you want to load the images after the page loads completely or when the user really scroll and see each image, Lazy Load is a good plugin and it support callbacks.
Images should load First as hidden, Then your script should run like
$(document).ready(function(){
// here do the scripting may be showing them one by one
});
Using Head.js (0.9) and verifying the loading of scripts from IE9, the Network pane of IE9 developer shows that the javascripts are loaded twice.
First time, the script is loaded with HTTP result code 200, thereafter the same script is reloaded with result code 304 (not modified).
However, the script pane and the script block drop down displays the scripts as being loaded twice. This in turn makes one of the scripts (sIFR.js) resetting its global sIFR object.
I'm suspecting the double-loading is causing this.
Note: Chrome and Firefox both work as expected.
Anyone else having seen this odd behaviour?
I'm having an problem where the iPad insists on loading an old copy of a .js file, instead of the current one. Strangely enough, this only happens when the page is in fullscreen mode, not when it's being run from the page.
I'm not using any kind of cache manifest;
When I open the page on Safari, it behaves as dictated by the latest version of the .js;
When I open the page through the icon, it behaves as dictated by the old .js;
Killing the running application, deleting the icon and then creating it again doesn't solve the problem; it's still using the old .js, even while in full screen.
Does anyone have an idea of what's going on?
-- update --
This seems to be an iOS 5 bug.
-- Workaround (a.k.a. ugly hack) --
Simply add some fake http params to the script tag, so that the cache thinks it's entirely another JS:
<script src="js/pentaho-jqm-repository.js"></script>
Becomes:
<script src="js/pentaho-jqm-repository.js?fkn-ios-bug=1"></script>
After using the aforementioned workaround (adding a fake parameter to the URL) and then changing it back, strangely enough, the problem stopped happening. Of course, in a production environment, one wouldn't be able to do this, so I think I'll just start numbering the js versions so that the end user won't have this problem.
I am not using any plugins or frameworks.
I have some local help pages (which will not be hosted on a server), most of which need to be loaded into a frame. So, duringonload, I check if the page is in a frame or not:
top.document.location.href == document.location.href
and if this is true, and therefore the page is not in a frame, then I
top.document.location.href = "frame.html?info="+document.location.href;
Now, when frame.html?info=stuff.html loads, I can get the info parameter from:
`top.document` or `window.top.document`
and load that page into a frame as intended.
This all works as intended on Safari, IE9, and Opera. It does not work in Chrome. Instead, top.document and window.top.document are both undefined after frame.html is loaded.
How should I get the top URL and, more importantly, its parameters when I load frame.html?info=...
If it is helpful, I believe this behavior is because of this issue.