Preload Css hover Images with Javascript
2009-09-16 22:42
309 查看
Source: Preload
Css hover Images with Javascript
Why we
need to preload css hover images? It is for the userability. Why we
need to preload css hover images by Javascript? It is easy to implement
and maintenance. below is the sample css class for a image
button.
.button
{
background-image:
url(../images/button.jpg);
}
.button:hover
{
background-image:
url(../images/button_ro.jpg);
}
If
you did not preload "button_ro.jpg", the button will disappear for a
while untill the "button_ro.jpg" is loaded, when user mouse over the
button.
Yes, you can hard code to preload the
"button_ro.jpg" in <body onload="....">, but it is not a
good idea, and It is hard to maintenance. So the idea is to use
Javascript to preload the images and only the Hover images. So in this
example it is only preload "button_ro.jpg".
How
to achive this? The idea is use javascript to parse the css for current
page, find the hover images and preload it. Below is the Javascript
function:
var preloadCssImages = {
imgUrls: [],
divPreImages:
null,
Load:
function() {
this.parseCSS(document.styleSheets);
},
InitPreImageDiv:
function() {
this.divPreImages =
document.createElement("div");
this.divPreImages.style.display = "none";
this.divPreImages.style.visibility = "hidden";
document.body.appendChild(this.divPreImages);
},
inArray:
function(
elem, array ) {
for ( var i
= 0, length
= array.length; i < length; i++ )
if ( array[ i ] === elem
)
return i;
return -1;
},
parseCSS:
function(sheets) {
var w3cImport =-1;
},
parseCSS:
function(sheets) {
var w3cImport =
false,
imported
= [],
importedSrc
= [],
baseURL;
var sheetIndex =
sheets.length;
while(sheetIndex--){//loop
through each stylesheet
var cssPile =
'';//create
large string of all css rules in sheet
var csshref =
(sheets[sheetIndex].href) ?
sheets[sheetIndex].href : 'window.location.href';
var baseURLarr =
csshref.split('/');//split
href at / to make array
baseURLarr.pop();//remove file path from baseURL array
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(sheets[sheetIndex].cssRules || sheets[sheetIndex].rules){
thisSheetRules
= (sheets[sheetIndex].cssRules)
? //->>> http://www.quirksmode.org/dom/w3c_css.html
sheets[sheetIndex].cssRules
: //w3
sheets[sheetIndex].rules;
//ie
var ruleIndex =
thisSheetRules.length;
while(ruleIndex--){
if(thisSheetRules[ruleIndex].style && thisSheetRules[ruleIndex].style.cssText){
var text =
thisSheetRules[ruleIndex].style.cssText;
if(thisSheetRules[ruleIndex].selectorText.indexOf('hover')
!=
-1) { //only
add hover class....
if(text.toLowerCase().indexOf('url')
!=
-1){ // only
add rules to the string if you can assume, to find an image, speed
improvement
cssPile
+= text;
//
thisSheetRules[ruleIndex].style.cssText instead of
thisSheetRules[ruleIndex].cssText is a huge speed
improvement
}
}
}
else
if(thisSheetRules[ruleIndex].styleSheet) {
imported.push(thisSheetRules[ruleIndex].styleSheet);
w3cImport
= true;
}
}
}
//parse cssPile for image urls
var tmpImage =
cssPile.match(/[^\("]+\.(gif|jpg|jpeg|png)/g);
//reg ex to get a string of between a "(" and a ".filename"
/ '"' for opera-bugfix
if(tmpImage){
var i =
tmpImage.length;
while(i--){
// handle
baseUrl here for multiple stylesheets in different folders
bug
var imgSrc =
(tmpImage[i].charAt(0)
==
'/'
||
tmpImage[i].match('://'))
? //
protocol-bug fixed
tmpImage[i]
:
baseURL
+ tmpImage[i];
if(this.inArray(imgSrc, this.imgUrls) ==
-1){
this.imgUrls.push(imgSrc);
}
}
}
if(!w3cImport && sheets[sheetIndex].imports && sheets[sheetIndex].imports.length) {
for(var
iImport =
0, importLen = sheets[sheetIndex].imports.length; iImport
<
importLen; iImport++){
var iHref =
sheets[sheetIndex].imports[iImport].href;
iHref
= iHref.split('/');
iHref.pop();
iHref
= iHref.join('/');
if (iHref) {
iHref
+=
'/';
//tack on
a / if needed
}
var iSrc =
(iHref.charAt(0)
==
'/'
||
iHref.match('://'))
? //
protocol-bug fixed
iHref
:
baseURL
+ iHref;
importedSrc.push(iSrc);
imported.push(sheets[sheetIndex].imports[iImport]);
}
}
}//loop
if(imported.length){
parseCSS(imported,
importedSrc);
return false;
}
if( this.imgUrls && this.imgUrls.length >
0 ) {
this.InitPreImageDiv();
this.loadImgs();
}
},
loadImgs:
function(){
if(this.imgUrls && this.imgUrls.length){
for ( var i
= 0, length
= this.imgUrls.length; i <
length; i++ )
{
var img =
new
Image(); //new img
obj
img.src
= this.imgUrls[i]; //set src either absolute or rel to css
dir
this.divPreImages.appendChild(img);
}
}
}
};
How to use this:
just
call: preloadCssImages.Load(); after your page
loaded.
Css hover Images with Javascript
Why we
need to preload css hover images? It is for the userability. Why we
need to preload css hover images by Javascript? It is easy to implement
and maintenance. below is the sample css class for a image
button.
.button
{
background-image:
url(../images/button.jpg);
}
.button:hover
{
background-image:
url(../images/button_ro.jpg);
}
If
you did not preload "button_ro.jpg", the button will disappear for a
while untill the "button_ro.jpg" is loaded, when user mouse over the
button.
Yes, you can hard code to preload the
"button_ro.jpg" in <body onload="....">, but it is not a
good idea, and It is hard to maintenance. So the idea is to use
Javascript to preload the images and only the Hover images. So in this
example it is only preload "button_ro.jpg".
How
to achive this? The idea is use javascript to parse the css for current
page, find the hover images and preload it. Below is the Javascript
function:
var preloadCssImages = {
imgUrls: [],
divPreImages:
null,
Load:
function() {
this.parseCSS(document.styleSheets);
},
InitPreImageDiv:
function() {
this.divPreImages =
document.createElement("div");
this.divPreImages.style.display = "none";
this.divPreImages.style.visibility = "hidden";
document.body.appendChild(this.divPreImages);
},
inArray:
function(
elem, array ) {
for ( var i
= 0, length
= array.length; i < length; i++ )
if ( array[ i ] === elem
)
return i;
return -1;
},
parseCSS:
function(sheets) {
var w3cImport =-1;
},
parseCSS:
function(sheets) {
var w3cImport =
false,
imported
= [],
importedSrc
= [],
baseURL;
var sheetIndex =
sheets.length;
while(sheetIndex--){//loop
through each stylesheet
var cssPile =
'';//create
large string of all css rules in sheet
var csshref =
(sheets[sheetIndex].href) ?
sheets[sheetIndex].href : 'window.location.href';
var baseURLarr =
csshref.split('/');//split
href at / to make array
baseURLarr.pop();//remove file path from baseURL array
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(sheets[sheetIndex].cssRules || sheets[sheetIndex].rules){
thisSheetRules
= (sheets[sheetIndex].cssRules)
? //->>> http://www.quirksmode.org/dom/w3c_css.html
sheets[sheetIndex].cssRules
: //w3
sheets[sheetIndex].rules;
//ie
var ruleIndex =
thisSheetRules.length;
while(ruleIndex--){
if(thisSheetRules[ruleIndex].style && thisSheetRules[ruleIndex].style.cssText){
var text =
thisSheetRules[ruleIndex].style.cssText;
if(thisSheetRules[ruleIndex].selectorText.indexOf('hover')
!=
-1) { //only
add hover class....
if(text.toLowerCase().indexOf('url')
!=
-1){ // only
add rules to the string if you can assume, to find an image, speed
improvement
cssPile
+= text;
//
thisSheetRules[ruleIndex].style.cssText instead of
thisSheetRules[ruleIndex].cssText is a huge speed
improvement
}
}
}
else
if(thisSheetRules[ruleIndex].styleSheet) {
imported.push(thisSheetRules[ruleIndex].styleSheet);
w3cImport
= true;
}
}
}
//parse cssPile for image urls
var tmpImage =
cssPile.match(/[^\("]+\.(gif|jpg|jpeg|png)/g);
//reg ex to get a string of between a "(" and a ".filename"
/ '"' for opera-bugfix
if(tmpImage){
var i =
tmpImage.length;
while(i--){
// handle
baseUrl here for multiple stylesheets in different folders
bug
var imgSrc =
(tmpImage[i].charAt(0)
==
'/'
||
tmpImage[i].match('://'))
? //
protocol-bug fixed
tmpImage[i]
:
baseURL
+ tmpImage[i];
if(this.inArray(imgSrc, this.imgUrls) ==
-1){
this.imgUrls.push(imgSrc);
}
}
}
if(!w3cImport && sheets[sheetIndex].imports && sheets[sheetIndex].imports.length) {
for(var
iImport =
0, importLen = sheets[sheetIndex].imports.length; iImport
<
importLen; iImport++){
var iHref =
sheets[sheetIndex].imports[iImport].href;
iHref
= iHref.split('/');
iHref.pop();
iHref
= iHref.join('/');
if (iHref) {
iHref
+=
'/';
//tack on
a / if needed
}
var iSrc =
(iHref.charAt(0)
==
'/'
||
iHref.match('://'))
? //
protocol-bug fixed
iHref
:
baseURL
+ iHref;
importedSrc.push(iSrc);
imported.push(sheets[sheetIndex].imports[iImport]);
}
}
}//loop
if(imported.length){
parseCSS(imported,
importedSrc);
return false;
}
if( this.imgUrls && this.imgUrls.length >
0 ) {
this.InitPreImageDiv();
this.loadImgs();
}
},
loadImgs:
function(){
if(this.imgUrls && this.imgUrls.length){
for ( var i
= 0, length
= this.imgUrls.length; i <
length; i++ )
{
var img =
new
Image(); //new img
obj
img.src
= this.imgUrls[i]; //set src either absolute or rel to css
dir
this.divPreImages.appendChild(img);
}
}
}
};
How to use this:
just
call: preloadCssImages.Load(); after your page
loaded.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 3 Ways to Preload Images with CSS, JavaScript, or Ajax---reference
- Toggle Java, Javascript, Images, CSS, Flash, Animations & Proxy in Firefox with Quick Java
- how to add Javascript and CSS in page layout with sharepoint 2013
- Update: A New & Improved jQuery Script to Automatically Preload images from CSS
- 基于 Django1.10 文档的深入学习（28）—— Managing static files(e.g. images, JavaScript, CSS)
- [CSS] Scale on Hover with Transition
- 静态文件（一） 管理静态文件（eg. images,JavaScript, CSS)
- Django基础，Day9 - 静态文件目录与路径设置说明(eg. images, JavaScript, CSS)
- [Javascript] Format console.log with CSS and String Template Tags
- [转]Building iPhone Apps with HTML CSS and JavaScript
- Beginning JavaScript and CSS Development with jQuery
- Django基础，Day9 - 静态文件目录与路径设置说明(eg. images, JavaScript, CSS)
- interactive graphics with D3: HTML, CSS, Javascript
- django 中使用静态文件（css,images,javascript）
- [CSSinJS] Convert Sass (SCSS) Styled Button to CSSinJS with JavaScript Templates and Variables
- SpringMVC 拦截器（interceptors）对样式（css），JavaScript（js），图片（images）链接的拦截
- print control with css and javascript
- 前端面试总结之前端性能优化（ http css JavaScript images HTML）
- Django~static files (e.g. images, JavaScript, CSS)
- [AJAX]40+ Tooltips Scripts With AJAX, JavaScript & CSS