问题
I know this is a hot topic and I know there have been previous questions with identical titles, but I tried everything and something's just not working right. For some reason, my Firefox will not preload the images. The images DO preload (as they should) in IE7/8 and Chrome. But not in Firefox.
EDIT:
I've created a new Fiddle: http://jsfiddle.net/Z2W7r/ If anyone can modify it and add the proper jQuery or Javascript code to make the image preload, I would be so gratefully appreciative.
I'm even using the following plugin:
jQuery.preloadCssImages = function(){
var allImgs = [];//new array for all the image urls
var k = 0; //iterator for adding images
var sheets = document.styleSheets;//array of stylesheets
for(var i = 0; i<sheets .length; i++){//loop through each stylesheet
var cssPile = '';//create large string of all css rules in sheet
var csshref = (sheets[i].href) ? sheets[i].href : 'window.location.href';
var baseURLarr = csshref.split('/');//split href at / to make array
baseURLarr.pop();//remove file path from baseURL array
var baseURL = baseURLarr.join('/');//create base url for the images in this sheet (css file's dir)
if(baseURL!="") baseURL+='/'; //tack on a / if needed
if(document.styleSheets[i].cssRules){//w3
var thisSheetRules = document.styleSheets[i].cssRules; //w3
for(var j = 0; j<thisSheetRules.length; j++){
cssPile+= thisSheetRules[j].cssText;
}
}
else {
cssPile+= document.styleSheets[i].cssText;
}
//parse cssPile for image urls and load them into the DOM
var imgUrls = cssPile.match(/[^\(]+\.(gif|jpg|jpeg|png)/g);//reg ex to get a string of between a "(" and a ".filename"
if(imgUrls != null && imgUrls.length>0 && imgUrls != ''){//loop array
var arr = jQuery.makeArray(imgUrls);//create array from regex obj
jQuery(arr).each(function(){
allImgs[k] = new Image(); //new img obj
allImgs[k].src = (this[0] == '/' || this.match('http://')) ? this : baseURL + this; //set src either absolute or rel to css dir
k++;
});
}
}//loop
return allImgs;
}
And calling it like this:
$(document).ready(function() {
$.preloadCssImages();
});
So...Does anyone have any idea why this script (OR ANY SCRIPTS at that matter) are not working in Firefox only? I can provide the address for the site if requested.
回答1:
Very old but threat, but the problem it's still alive!!
I have tried diffent script to archive this (including this one) and debug when and why it's happend.
I have found that the script fails ONLY when this 3 conditions are in the pot:
Running Firefox browser
, on Linux OS
and when you have in your CSS files, cross domain URL
for images.
The reason, HTTP_access_control... But must have to do something with Linux
also.. because even if you try with
Access-Control-Allow-
in the code, it's fails.
My actual solution to this (not elegant but at least avoid the problem) is to load the script based on the following condition:
<?PHP
$ua = $_SERVER["HTTP_USER_AGENT"];
$firefox = strpos( $ua, 'Firefox') ? true : false ;
$ubuntu = strpos( $ua, 'Ubuntu') ? true : false ;
if ( !$firefox && !$ubuntu )echo '<script type="text/javascript" src="js/preloadcssimg.js"></script>';
?>
回答2:
It's probably because you are using it locally, FF has a security issue accessing local CSS files. Try uploading the project to a web server or fire up a local apache and see if the problem remains.
回答3:
I guess people are saying the pictures are preloading for them using the preloading plugin mentioned in the question.
If someone wants to offer additional advice or a simpler preloading script, I'm all ears. Otherwise, I'll make this answer as the correct one...
And just for correctness, here's the plugin that I'm talking about:
jQuery.preloadCssImages = function(){
var allImgs = [];//new array for all the image urls
var k = 0; //iterator for adding images
var sheets = document.styleSheets;//array of stylesheets
for(var i = 0; i<sheets .length; i++){//loop through each stylesheet
var cssPile = '';//create large string of all css rules in sheet
var csshref = (sheets[i].href) ? sheets[i].href : 'window.location.href';
var baseURLarr = csshref.split('/');//split href at / to make array
baseURLarr.pop();//remove file path from baseURL array
var baseURL = baseURLarr.join('/');//create base url for the images in this sheet (css file's dir)
if(baseURL!="") baseURL+='/'; //tack on a / if needed
if(document.styleSheets[i].cssRules){//w3
var thisSheetRules = document.styleSheets[i].cssRules; //w3
for(var j = 0; j<thisSheetRules.length; j++){
cssPile+= thisSheetRules[j].cssText;
}
}
else {
cssPile+= document.styleSheets[i].cssText;
}
//parse cssPile for image urls and load them into the DOM
var imgUrls = cssPile.match(/[^\(]+\.(gif|jpg|jpeg|png)/g);//reg ex to get a string of between a "(" and a ".filename"
if(imgUrls != null && imgUrls.length>0 && imgUrls != ''){//loop array
var arr = jQuery.makeArray(imgUrls);//create array from regex obj
jQuery(arr).each(function(){
allImgs[k] = new Image(); //new img obj
allImgs[k].src = (this[0] == '/' || this.match('http://')) ? this : baseURL + this; //set src either absolute or rel to css dir
k++;
});
}
}//loop
return allImgs;
}
And calling it like this:
$(document).ready(function() {
$.preloadCssImages();
});
Thanks! Amit
来源:https://stackoverflow.com/questions/3427654/preloading-images-using-jquery