ایجاد prelode برای تصاویری که آدرسشون رو با json گرفتیم

I

i-php-i

Active Member
من با ajax و json ادرس چندتا تصویر رو که باید توی اسلاید شو بکار برن رو برای کلاینت می فرستم. حالا می خوام قبل از نمایش تصاویر توی صفحه همه اونها رو بصورت کامل لود کنم.

از این کدها استفاده می کنم، آیا این کدها درست هستن؟]
کد: 
arrayOfImages= new Array();
for(i in data.images){
    arrayOfImages[i]=data.images[i]['img'];
}
function preload(OfImages) {
    $(OfImages).each(function () {
        $('<img />').attr('src',this).appendTo('body').css('display','none');
    });
}
preload(arrayOfImages);
//
بعد از تابع preload توابعی که برای نمایش اسلایدشو بکار می رن استفاده می شه، آیا کدهای بعد از preload بلافاصله بعد از فراخوانی تابع اجرا می شن یا تا زمانی که تصاویر لود نشدن سایر کدها اجرا نمی شن؟

مشکل اینجاست که کدهایی که قرار دادم آدرس بعضی از لینکها رو بصورت undefined نمایش می ده.
 
آخرین ویرایش:
omid_p30

omid_p30

Member
i-php-i گفت:
آیا کدهای بعد از preload بلافاصله بعد از فراخوانی تابع اجرا می شن
کلیک کنید تا باز شود...
آره کدها بعد از فراخوانی preload اجرا میشن. اگر میخای که بعد از لود شدن کامل تصاویر کدهای بعد از preload اجرا بشن باید از تابع ready برای تصاویر استفاده کنی. می‌دونی که تو جی کوری هر تابعی که داخل ready استفاده بشه بعد از لود شد کامل اون عنصر فراخوانی میشه. شما باید از ready برای تصاویر استفاده کنی. به طور مثال
[JSS]
$('img.cssClass').ready(function(){
//You should call faunctions here, that you want to be called them after preload function.
});
[/JSS]
i-php-i گفت:
مشکل اینجاست که کدهایی که قرار دادم آدرس بعضی از لینکها رو بصورت undefined نمایش می ده.
کلیک کنید تا باز شود...

فقط بعضی از لینکها خرابن؟
 
آخرین ویرایش:
I

i-php-i

Active Member
فقط بعضی از لینکها خرابن؟
کلیک کنید تا باز شود...
تقریبا یکی در میون بصورت undefined هستن. از سرور بدون مشکل خونده می شن ولی توی کلاینت مشکل دارن. آرایه ای که از سرور ارسال می شه به این صورته:
PHP: 
$arr[0]['link']='link0';
$arr[0]['img']='img0';
$arr[1]['link']='link1';
$arr[1]['img']='img1';
$arr[2]['link']='link2';
$arr[2]['img']='img2';
شما یه کد می تونید بنویسید که اول تصاویر رو لود کنه و بعد تصاویر و لینکها رو داخل همدیگه قرار بده و توی تگ div راره بده؟
یعنی به این صورت باشه:
HTML: 
<div>
<a href="link0"><img src="img0" /></a>
<a href="link1"><img src="img1" /></a>
<a href="link2"><img src="img2" /></a>
</div>
 
omid_p30

omid_p30

Member
[JSS]

var i = 0; arr.forEach(function(arr, i){

$('<a />',{
"text" : "",
"class" : "link"+i,
"css" : { "color" : "red" },
"click" : function(){ alert("you just clicked me!!"); },
"href" : t['link']}
).appendTo('body');
$('<img />',{
"text" : "",
"class" : "img"+i,
"css" : { "color" : "red" },
"click" : function(){ alert("you just clicked me!!"); },
"src" : "t['img']"}
).appendTo('body .link'+i);
++i;});
[/JSS]
البتته تست نکردم. خودت یه تست کن ببین کار می‌کنه یا نه.
 
I

i-php-i

Active Member
البتته تست نکردم. خودت یه تست کن ببین کار می‌کنه یا نه.
کلیک کنید تا باز شود...
باتوجه به کدهایی که دادید، چطور می شه دقیقا بعد از اینکه همه عکسها لود شدن، اسلاید شو رو فراخوانی کرد؟
 
omid_p30

omid_p30

Member
باید از callback استفاده کنی.
[JSS]
$('document').ready(function(){
var arr = [] ;// getting array of links and src
preload(arr, function(){
$('.img').ready(function(){
//calling slideshow
});
});//End of preload function calling
function preload(arr, callback){
var i = 0;
arr.forEach(function(arr, i){
$('<a />',{
"text" : "",
"class" : "link"+i,
"css" : { "color" : "red" },
"click" : function(){ alert("you just clicked me!!"); },
"href" : t['link']}
).appendTo('body');
$('<img />',{
"text" : "",
"class" : "img img"+i,
"css" : { "color" : "red" },
"click" : function(){ alert("you just clicked me!!"); },
"src" : "t['img']"}
).appendTo('body .link'+i);
++i;
});//End foreach
}//End of preload function definition
});// End of document ready
[/JSS]
 
I

i-php-i

Active Member
این کدها ارور می دن. مثلا t تعریف نشده هست.
بعد class : img+i باعث می شه کلاس تصاویر عوض شه و تصویر لود نشه.

مشکل بعدی هم اینه که باز هم لینکها و تصاویر توی تابع undefined هستن. فکر کنم بخاطر رشته جی ساین هست. چون یه آرایه چند بعدی رو به جی سان تبدیل کردم و فکر کنم موقع ارسال به تابع باید دوباره به آرایه تبدیل بشه. درسته؟
 
omid_p30

omid_p30

Member
t رو تبدیل به arr کن. این اشتباه من بود.
نام کلاس ربطی به لود نشدن تصویر نداره. اگه دقت کرده باشی من دو تا کلاس تعریف کردم برای تصاویر. هم img هم img+i . رویداد ready هم برای تمامی تصاویر با کلاس img فراخوانی کردم.
این هم که می‌بینی کد خطا داره درسته. کد تست نشده بود. من می‌خواستم بیشتر روش رو برات بگم دیگه بقیه رو خودت باید کامل کنی.
درباره جی ساین هم من چیزی نشنیدم. این چی هست. یه جور آرایه است یا آبجکت؟ بعدش منظورت تو جاوا اسکریپت بود یا php ؟
اگر آرایه باشه کد حلقه foreach‌ روش کار می‌کنه.
 
I

i-php-i

Active Member
درباره جی ساین هم من چیزی نشنیدم. این چی هست. یه جور آرایه است یا آبجکت؟ بعدش منظورت تو جاوا اسکریپت بود یا php ؟
کلیک کنید تا باز شود...
جی سان رشته هست. توی پی اچ پی یه آرایه رو می شه به جی سان تبدیل کرد و بعد اون رو برای کلاینت ارسال کرد.
حالا نمی دونم برای استفاده از این رشته باید توی کلاینت دوباره اون رو به آرایه تبدیل کرد یا نه؟

کار این کد چیه؟
کد: 
appendTo('body .link'+i)
بعد از اینکه عکسها لود شدن باید html از لینکها و تصاویر درست کنیم و به سورس صفحه اضافه کنیم. بنظرتون این کار لازمه؟
 
آخرین ویرایش:
omid_p30

omid_p30

Member
i-php-i گفت:
جی سان رشته هست. توی پی اچ پی یه آرایه رو می شه به جی سان تبدیل کرد و بعد اون رو برای کلاینت ارسال کرد.
کلیک کنید تا باز شود...

آهان الان افتاد. منظورت json بود. فارسی نوشتی متوجه نشدم.
json رشته نیست. آبجکت هستش. ساختاری شبیه xml داره ولی خیلی ساده تر. خود جی کوری یه تابع داره به نام jQuery.parseJSON که json رو برات پارس می‌کنه. شما نتیجه رو که از PHP گرفتی بده به این تابع . این تابع یه آبجکت json‌ بر می‌گردونه.
i-php-i گفت:
کار این کد چیه؟
کلیک کنید تا باز شود...

عکس‌هات باید داخل تگ a قرار بگیرن دیگه . بعدش هم هر عکس باید دقیقاْ داخل تگ a خودش قرار بگیره. من به هر تگ a یه کلاس واحد دادم تا عکس خودش رو داخلش قرار بدم.


i-php-i گفت:
بعد از اینکه عکسها لود شدن باید html از لینکها و تصاویر درست کنیم و به سورس صفحه اضافه کنیم. بنظرتون این کار لازمه؟
کلیک کنید تا باز شود...
آره دیگه. یعنی html تصاویر و لینک ها رو به صفحه اضافه نکنیم؟
 
I

i-php-i

Active Member
آره دیگه. یعنی html تصاویر و لینک ها رو به صفحه اضافه نکنیم؟
کلیک کنید تا باز شود...
عکس‌هات باید داخل تگ a قرار بگیرن دیگه . بعدش هم هر عکس باید دقیقاْ داخل تگ a خودش قرار بگیره. من به هر تگ a یه کلاس واحد دادم تا عکس خودش رو داخلش قرار بدم.
کلیک کنید تا باز شود...
بغیر از حلقه ای که نوشتید، یه حلقه دیگه باید بنویسم و html لینکها و عکسها رو تولید کنم و به قسمت مربوط به نمایش اسلاید شو اضافه کنم؟ درسته؟
 
omid_p30

omid_p30

Member
i-php-i گفت:
بغیر از حلقه ای که نوشتید، یه حلقه دیگه باید بنویسم و html لینکها و عکسها رو تولید کنم و به قسمت مربوط به نمایش اسلاید شو اضافه کنم؟ درسته؟
کلیک کنید تا باز شود...

نه دیگه همون تابع appendTo کدهای html رو به body اضافه می‌کنه.
ببین کد من دو تا تابع appendTo‌ داره. اولی تگ a رو به body اضافه می‌کنه دومی تگ img رو به داخل تگ a اضافه می‌کنه. این کار هم با اون حلقه foreach به ازای تمام عناصر آرایه انجام میشه.
اما برای اینکه هر تگ img دقیقاْ داخل تگ a مربوط به خودش قرار بگیره به کلاس واحد برای تگ‌های a تعریف کردم.
 
I

i-php-i

Active Member
نه دیگه همون تابع appendTo کدهای html رو به body اضافه می‌کنه.
کلیک کنید تا باز شود...
درسته که با appendTo تگها رو به body اضافه کردید ولی کدهای html باید به جایی اضافه بشن که اسلاید شو بتونه اونا رو شناسایی کنه. برای این منظور باید چیکار کرد؟
 
omid_p30

omid_p30

Member
i-php-i گفت:
درسته که با appendTo تگها رو به body اضافه کردید ولی کدهای html باید به جایی اضافه بشن که اسلاید شو بتونه اونا رو شناسایی کنه. برای این منظور باید چیکار کرد؟
کلیک کنید تا باز شود...

یعنی چی که اسلاید شو بتونه اونا رو تشخیص بده؟ با یک تگ و یک آی دی یا کلاس میشه این کار رو کرد دیگه. من به تگ body اضافه کردم شما می‌تونی به هر تگی که خواستی و داخل صفحه است اضافه کنی.
 
I

i-php-i

Active Member
الان لینکها و عکسها به قسمت مربوط به اسلاید شو اضافه می شن ولی تابع callback اجرا نمی شه.

کد: 
preload[COLOR=#009900]([/COLOR]arr[COLOR=#339933],[/COLOR] [COLOR=#003366][B]function[/B][/COLOR][COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#009900]{[/COLOR]
$[COLOR=#009900]([/COLOR][COLOR=#3366CC]'.img'[/COLOR][COLOR=#009900])[/COLOR].[COLOR=#660066]ready[/COLOR][COLOR=#009900]([/COLOR][COLOR=#003366][B]function[/B][/COLOR][COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#009900]{[/COLOR]
[COLOR=#006600][I]//calling slideshow[/I][/COLOR]
[COLOR=#009900]}[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#009900]}[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR][COLOR=#006600][I]//End of preload function calling
[/I][/COLOR]
یه alert هم به این صورت به تابع callback اضافه کردم ولی اجرا نشد
کد: 
preload[COLOR=#009900]([/COLOR]arr[COLOR=#339933],[/COLOR] [COLOR=#003366][B]function[/B][/COLOR][COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#009900]{[/COLOR]
alert(123456789)
$[COLOR=#009900]([/COLOR][COLOR=#3366CC]'.img'[/COLOR][COLOR=#009900])[/COLOR].[COLOR=#660066]ready[/COLOR][COLOR=#009900]([/COLOR][COLOR=#003366][B]function[/B][/COLOR][COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#009900]{[/COLOR]
[COLOR=#006600][I]//calling slideshow[/I][/COLOR] 
[COLOR=#009900]}[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#009900]}[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR][COLOR=#006600][I]//End of preload function calling[/I][/COLOR]
 
I

i-php-i

Active Member
با window.load این کدها اجرا می شن و کاری با html نداره

بعد از گرفتن پاسخ سرور، عکسها لود می شن و به قسمت مربوط به اسلاید شو اضافه می شن.

کدهای اسلاید شو به این شکله:
HTML: 
<div id="slider"></div>
 
I

i-php-i

Active Member
اول تابع رو تعریف کردم بعد فراخونیش کردم

کدهای بدنه و فراخوانی تابع، داخل window.load هستن.
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا