background-image:url('images/bg1.png'), url('images/speed/bg1.jpg');
我正在尝试利用多个背景图像的选项来加载元素，首先，每个背景图像的快速，低分辨率版本一旦加载就会被更高质量的版本替换。
任何有效的解决方案？
注意：以下是比实际问题更一厢情愿的想法;我认为这可能是一个很好的主题，可以将调查结合起来。
作为一个附带问题，有没有人知道使用这种想法的方法，而是将图像转换为从低到高的渲染渲染，具有某种噪声效果，如果你看到我要去的地方接着就，随即。就好像每个图像从普通噪声平滑到HD一样，在它加载时获得分辨率直到达到适当的水平。
我想我得到的是：“可以编写一个脚本来加载单个图像，因为可变噪声会随着图像加载而逐渐变得清晰，而不是从上到下加载100％的res？ “
答案 0 :(得分：5)
//
// You have dozen of hd photos, and don't want to embed them right from the get go
// in order to avoid 'interlaced' load, boost application load, etc.
// Idea is to place lo-res photos, temporarily, in place where hd ones should go,
// while downloading full quality images in the background.
//
// People usualy do this kind of caching by attaching 'onload' event handler to off-screen
// Image object ( created by new Image(), document.createElement('img'), or any
// other fashion ), which gets executed natively by a browser when the event
// ( 'onload' in this case ) occurs, and setting the '.src' property of an image to
// the phisical path ( relative/absolute ) of an img to start the download process.
// The script pressented here use that approach for multiple images,
// and notifies of task done by running provided function.
//
// So, solution is to provide locations of images you want to,
// and get notified when they get fully downloaded, and cached by browser.
// To do that you pass a function as 1st parameter to the fn below,
// passing as many images as needed after it.
//
// Code will scan through provided images keeping the ones that are actualy
// image files( .jpeg, .png, .tiff, etc.), create 'off-screen' Image objects
// and attach onload/onerror/onabort handler fn to each one( which will be called
// when coresponding circumstance occurs ), and initiate loading by setting the
// .src property of an Image object.
//
// After the 'load-handler' has been called the number of times that coresponds to
// number of images ( meaning the dload process is done ), script notifies you
// of job done by running the function you provided as first argument to it,
// additinaly passing images( that are cached and ready to go ) as
// parameters to callback fn you supplied.
//
// Inside the callback you do whatever you do with cached photos.
//
function hd_pics_dload( fn /* ,...hd-s */ ) {
var
n = 0, // this one is used as counter/flag to signal the download end
P = [], // array to hold Image objects
// here goes the image filtering stuff part,
// all the images that pass the 'regex' test
// ( the ones that have valid image extension )
// are considerd valid, and are kept for download
arg_imgs = Array.prototype.filter.call(
Array.prototype.slice.call( arguments, 1 ),
function ( imgstr ) {
return ( /\.(?:jpe?g|jpe|png|gif|bmp|tiff?|tga|iff)$/i ).test( imgstr );
}
);
// aborts script if no images are provided
// runs passed function anyway
if ( arg_imgs.length === 0 ) {
fn.apply( document, arg_imgs );
return arg_imgs;
}
// this part keeps track of number of 'load-handler' calls,
// when 'n' hits the amount of given photos
// provided callback is runned ( signaling load complete )
// and whatever code is inside of it, it is executed.
// it passes images as parameters to callback,
// and sets it's context ( this ) to document object
var hd_imgs_load_handler = function ( e ) {
// logs the progress to the console
console.log( e.type, ' -- > ', this.src );
( ++n === arg_imgs.length )
&& fn.apply( document, arg_imgs );
};
// this part loops through given images,
// populates the P[] with Image objects,
// attaches 'hd_imgs_load_handler' event handler to each one,
// and starts up the download thing( by setting '.src' to coresponding image path )
for (
var i = 0,
len = arg_imgs.length;
i < len;
i++
) {
P[i] = new Image;
P[i].onabort = hd_imgs_load_handler;
P[i].onerror = hd_imgs_load_handler;
P[i].onload = hd_imgs_load_handler;
P[i].src = arg_imgs[i];
}
// it gives back images that are about to be loaded
return arg_imgs;
}
//
// use:
hd_pics_dload(
// 1st provide a function that will handle photos once cached
function () { console.log('done -> ', arguments ); },
// and provide pics, as many as needed, here
// don't forget to separate all parameters with a comma
'http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Flag_of_the_United_Nations.svg/2000px-Flag_of_the_United_Nations.svg.png',
'http://upload.wikimedia.org/wikipedia/commons/e/e5/IBM_Port-A-Punch.jpg',
'http://upload.wikimedia.org/wikipedia/commons/7/7e/Tim_Berners-Lee_CP_2.jpg',
'http://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/NewTux.svg/2000px-NewTux.svg.png',
'http://upload.wikimedia.org/wikipedia/commons/4/4c/Beekeeper_keeping_bees.jpg',
'http://upload.wikimedia.org/wikipedia/commons/9/9a/100607-F-1234S-004.jpg'
);
//
答案 1 :(得分：1)
相反
- 设置宽度和高度使用默认值绘制或Photoshop
- 使用http://www.smushit.com/ysmush.it/
设置图像宽度＆amp;高度通过html标签＆amp; CSS可以使图像缓慢渲染。
Smushing是雅虎的一个先进工具！在不改变质量的情况下从图像中删除多余数据。
这些技术改善了图像渲染时间。您还可以按照您的技术进一步改善图像加载时间。
答案 2 :(得分：1)
//
// here's more elaborate, and user friendly, version
// works the same as previous,
// I've just added the possibility to subscribe funcions
// for load/error/abort/done events separately,
// and pass images as image array with the hash map of options to the funcion,
// and some cleanup code to remove unnecesary function handlers
// after download is done.
//
// use:
//
// cacheimages(
// {
// imgs : [
// 'http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Flag_of_the_United_Nations.svg/2000px-Flag_of_the_United_Nations.svg.png',
// 'http://upload.wikimedia.org/wikipedia/commons/e/e5/IBM_Port-A-Punch.jpg',
// 'http://upload.wikimedia.org/wikipedia/commons/7/7e/Tim_Berners-Lee_CP_2.jpg',
// 'http://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/NewTux.svg/2000px-NewTux.svg.png',
// 'http://upload.wikimedia.org/wikipedia/commons/4/4c/Beekeeper_keeping_bees.jpg',
// 'http://upload.wikimedia.org/wikipedia/commons/9/9a/100607-F-1234S-004.jpg'
// ],
//
// load : function () { console.log( arguments, this ); },
// # triggered when single image is sucessfuly cached
// # @param1, ( string ), loaded image source path
// # @param2, ( event object ), native event object generated
// # context ( this ), Image object, target obj related with event
//
// error : function () { console.log( arguments, this ); },
// # triggered when error occured when tring to download image
// # @param1, ( string ), path to the image failed to load
// # @param2, ( event object ), native event object describing the circumstance
// # context ( this ), Image object, target obj related with event
//
// abort : function () { console.log( arguments, this ); },
// # triggered when download is haulted by user action ( browsers 'stop' button )
// # @param1, ( string ), path to the image failed to load
// # @param2, ( event object ), native event object generated
// # context ( this ), Image object, target obj related with event
//
// done : function () { console.log( arguments, this ); }
// # triggered after download proccess completes
// # @params, ( string(s) ), images in question
// # context ( this ), document
// }
// );
//
;(( function ( methodName, dfn ) {
// add "cacheimages" function identifier to target context ( window )
this[methodName] = dfn();
} ).call(
self,
"cacheimages",
function () {
var emptyfn = function () {};
var isfn = function ( o ) {
return typeof o === "function";
};
var isplainobj = function ( o ) {
return Object.prototype.toString.call( o ) === "[object Object]";
};
var isarray = function ( o ) {
return Object.prototype.toString.call( o ) === "[object Array]";
};
var defaults = {
load : emptyfn,
error : emptyfn,
abort : emptyfn,
done : emptyfn
};
var imgreg = /\.(?:jpe?g|jpe|png|gif|bmp|tiff?|tga|iff)$/i;
var events = ["onload", ,"onerror" ,"onabort"];
var _F = function ( settup ) {
if (
isplainobj( settup )
&& (
isarray( settup.imgs )
&& ( settup.imgs.length > 0 )
)
) {
var pics = [];
var n = 0;
var opts = {
load : isfn( settup.load ) ? settup.load : defaults.load,
error : isfn( settup.error ) ? settup.error : defaults.error,
abort : isfn( settup.abort ) ? settup.abort : defaults.abort,
done : isfn( settup.done ) ? settup.done : defaults.done,
imgs : settup.imgs.filter(
function ( imgstr ) {
return imgreg.test( String( imgstr ) );
}
)
};
var loadhandler;
if (
opts.imgs.length == 0
) {
opts.done.call( document );
return [];
}
loadhandler = function ( e ) {
e || ( e = window.event );
n += 1;
if ( n < opts.imgs.length ) {
opts[ e.type ].call( this, this.src, e );
// console && console.log( e.type, ' --> [ ', this.src, ' ].' );
} else {
opts.done.apply( document, opts.imgs );
pics.forEach(
function ( imgobj ) {
events.forEach(
function ( vnt ) {
imgobj[vnt] = null;
}
);
}
);
}
};
opts.imgs.forEach(
function ( imgstr, i ) {
pics[i] = new Image;
events.forEach(
function ( vnt ) {
pics[i][vnt] = loadhandler;
}
);
pics[i].src = imgstr;
}
);
return opts.imgs.concat();
} else {
return false;
}
};
return _F;
}
));
//