چگونگی Preloading تصویر؟؟؟

[ablofazlkianianboohi]

سلام دوستان
وقتتون به خیر
می خواستم بدونم چطور با جاوااسکریپت یا جی کوئری کاری بکنم که یک تصویر که در صفحه وجود نداره لود بشه؟
یعنی همون Preloading Images.


تشکر

[pouyan.hosseini]

http://thinkpixellab.com/pxloader/
age safe in bazi ro ham niga koni ba estefade az hamin teknik dare axaro load mikone:
http://goo.gl/D12OW

[ablofazlkianianboohi]

دوست عزیز
ممنون از راهنماییت
ولی من هر کاری کردم نشد.طبق آموزشش یک متغیر از نوع pxloader تعریف کردم و عکس را درونش ریختم.بعد loadرو start کردم. اما نشد.
میشه یکم بیشتر راهنمایی کنید.

[pouyan.hosseini]

var baseURL = "Resources/Images/Cards/",
$progress = $("#progressbar"),
loader = new PxLoader(),
deck = generateDeck();

for (var i = 0; i < 52; i++) {
var pxImage = new PxLoaderImage(baseURL + deck[i] + ".png");
pxImage.imageNumber = i + 1;
loader.add(pxImage);
}

loader.addProgressListener(function(e) {
$progress.text(e.completedCount + " / " + e.totalCount);
$("#preview").attr("src", e.resource.img.src);
if (e.completedCount == e.totalCount) {
$("#wrapper").hide();
loadCompleted();
}
});

loader.start();

mesali k man khodam daghighan estefade kardam: http://hokm.pouyanhosseini.com/Resources/Javascripts/loader.js

[pouyan.hosseini]

in khate moheme baraye shoma

var pxImage = new PxLoaderImage(baseURL + deck[i] + ".png");

pxImage.imageNumber = i + 1;

loader.add(pxImage);

[ablofazlkianianboohi]

دوست عزیز
ممنون از راهنماییت
ولی بازم نشد! این هم کدم:

<script type="text/javascript">
jQuery.noConflict();

jQuery(document).ready(function(){

var baseURL = "images/products/",

loader = new PxLoader(),
deck = generateDeck();

for (var i = 0; i < 52; i++) {
var pxImage = new PxLoaderImage(baseURL + deck[i] + ".png");
pxImage.imageNumber = i + 1;
loader.add(pxImage);
}
loader.start();
});

</script>

[geeking]

باالفرض اینکه شما همه عکسهای خود را در یک آرایه جمع آوری کردید و میخواید اونا رو توی یک

<div id='divId'></div> ذخیره کنید، میتونید از کد زیر استفاده کنید :

$(function() { // on DOM ready

var images = [
"images/0.jpg",
"images/1.jpg",
"images/2.jpg",
"images/3.jpg",
"images/4.jpg",
"images/5.jpg",
"images/6.jpg",
"images/7.jpg",
"images/8.jpg",
"images/9.jpg",
"images/10.jpg"
];

(function loadImg(index) {
if (index >= images.length) return; // no more image to load

$('#divId').append( $('<img />').attr('src', srcImg).load(function() {
// invoke this function again in 1 secs incrementing index by 1
setTimeout(function() { loadImg(index + 1); }, 1000);
}) );

})(0); // initiate loading sequence with first image index

});