[英]Preloading images using jQuery
我知道這是一個熱門話題,而且我以前也曾有過相同標題的問題,但是我嘗試了所有嘗試,但有些工作不正常。 由於某些原因,我的Firefox無法預加載圖像。 圖像確實在IE7 / 8和Chrome中預加載(應預加載)。 但不是在Firefox中。
編輯:
我創建了一個新的Fiddle: http : //jsfiddle.net/Z2W7r/如果有人可以對其進行修改並添加適當的jQuery或Javascript代碼以進行圖像預加載,我將非常感激。
我什至在使用以下插件:
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;
}
並這樣稱呼它:
$(document).ready(function() {
$.preloadCssImages();
});
那么...有誰知道為什么這個腳本(或其他任何腳本)不能僅在Firefox中工作? 如果需要,我可以提供該站點的地址。
很老但是有威脅,但是問題仍然存在!!
我嘗試使用不同的腳本來存檔(包括此腳本)並調試何時以及為什么發生。
我發現只有在鍋中滿足以下3個條件時,腳本才會失敗:
Linux OS
上運行Firefox browser
,並且在CSS文件中包含圖像時,請使用cross domain URL
。 原因, HTTP_access_control ...但是還必須對Linux
進行一些操作。.因為即使您嘗試在代碼中使用Access-Control-Allow-
,它也會失敗。
我對此的實際解決方案(不是很好,但至少可以避免該問題)是根據以下條件加載腳本:
<?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>';
?>
可能是因為您在本地使用它,所以FF在訪問本地CSS文件時遇到安全問題。 嘗試將項目上傳到Web服務器或啟動本地apache,看看問題是否仍然存在。
我猜有人說圖片是使用問題中提到的預加載插件為他們預加載的。
如果有人想提供其他建議或更簡單的預加載腳本,我將不知所措。 否則,我會將此答案作為正確的答案...
只是為了正確起見,這是我正在談論的插件:
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;
}
並這樣稱呼它:
$(document).ready(function() {
$.preloadCssImages();
});
謝謝! 阿米特
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.