javascript preloading of any images not working in chrome

萝らか妹 提交于 2019-12-01 06:26:57

Finally fixed!

This wasn't a problem with the code or css, its apparently a known problem with my version of Chrome. Basically, even if certain images/files are cached, Chrome still tries a if-modified-since GET request to server. So to fix, I've set the expiry times for cache filetypes using the .htaccess file to override this - i.e. ExpiresByType image/jpg "access plus 4 hours" http://code.google.com/p/chromium/issues/detail?id=102706

Hogan

Follow up:

I've looked at you fiddle and I can't say for sure the issue but I notice you are using js to change css files depending on the window size.

I'm guessing this is the issue. The css is loaded, the dom is loaded and then the js runs and you see the flicker when the new css is invoked.

You can solve this by using media type and media queries in your css. cf w3.org/TR/css3-mediaqueries and stackoverflow.com/a/996796/215752

I you used media queries then the css would be defined before the dom gets loaded and there should be no flicker.

There may also be an error in only one of your sizes -- with media types it is easy to force one for testing.


I don't see anything wrong with your code and I don't think this code is causing the flicker (I expect that is a CSS issue) but here is your code re-written using a more current style:

var navbarImages = [];
preload(navbarImages,
   ["images/navbar/topbigdrophover.gif",
    "images/navbar/topdrophover.gif",
    "images/navbar/tophover.gif"]);

function preload(inArray,pathList) {
  var images = inArray;

  for (index = 0; index < pathList.length; index++) {    
    images[index] = new Image();
    images[index].src = pathList[index];
  }
}

I don't see the reason for var images = inArray (could just use inArray) but I kept it consistent with your code, there are many ways to write code with this functionality.

I suggest posting a new question that goes into detail with the flicker issue you have with chrome -- I'm guessing with some details you can get to the heart of the real issue.

You need to use arguments instead of preload.arguments to access the arguments passed to the function.

While using func.arguments should only cause a problem in strict mode, it might be completely disallowed in Chrome.

If fun is in strict mode, both fun.caller and fun.arguments are non-deletable properties which throw when set or retrieved

from https://developer.mozilla.org/en/JavaScript/Strict_mode#Making_eval_and_arguments_simpler

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!