Skip to content
May 17, 2012 / Mohamed Amged :)

Loading On Demand For Web and Mobile Apps

Loading On Demand For Web&Mobile Apps

النهاردة هكلمكم عن الكاش، واتمنى الموضوع يعجبكم. لو أول مره تدخل المدونة انصحك تقرأ البوست دا الأول بوست رقم زيرو
هتكلم النهاردة عن موضوع مهم جدا لأغلب الناس اللي بتشتغل على تطبيقات ويب معقدة او كبيرة
عندنا مثلا الموبيل ويب بيكون ديما عقبة كبيرة بتواجه اغلب المطورين، ان الموبيل امكانياتة محدودة للغاية حتى مع تطور الموبيل بوسيسورز الهايل لسه مشكله الاداء موجودة، طبعا بالاضافة الى مشكله الثري جي انترنت 3G internet انه بيكون ضعيف وبالتالي كل ما حجم محتويات الصفحة تزيد كل ما المشكلة تكبر، خصوصا محتويات الميديا Media Content اللي اغلبها متمثل ف الصور.
كدا مابيبقاش عند المطور حل غير انه يستعمل السيرفر لمعالجة الصورة وتصغير احجامها، ودي حاجة مرهقة جدا قد تكون مشروع قائم بذاتة مش مجرد جزء صغير من تطبيق هو بيشتغل علية، واغلب الناس بتنفض وبتحط كل حاجة زي ما هي، بالتالي متصفح الموبيل بتهنج والميموري بتزيد بطريقة غير عادية.

طب اية الحل؟؟

الحل هنا انك تستعمل الميكروداتا Microdata، طب واية الميكروداتا؟؟ هي عبارة عن html attribute بيبدأ بال prefix اللي اسمة data-
حاجة زي كدا:

<tag data-XXX=”YOUR DATA IS HERE”/>
طب هنستعملة ازاي؟؟
احنا هنشيل فيه لينكات الصور-مثلا- والداتا الخاصة بيها
حاجة زي كدا:
<div id=”test” data-picsRefs=”/pic1.png,/pic2.png,/pic3.png” ></div>
عن طريق جافاسكربت كود بسيط هنقدر نعمل parsing للداتا دي ونضيفها للصفحة وقت الحاجة فقط
كود:

var getImages = function(element) {
var data = $(element).attr(‘data-images’);
var paths = data.split(‘,’);
var html = ”;

for(var i = 0; i < paths.length; i++) {

html += ‘<img src=”‘ + paths[i] + ‘”/>’;

}

$(element)[0].innerHTML = html;

};

$(‘div.gallery’).each(function() {

getImages(this);

});

انا استخدمت ال jquery هنا عشان الحياة سهلة معاها، انا قريت الداتا من التاج وحطيتهم ف ارااي عن طريق الكود دا
كود:

var data = $(element).attr(‘data-images’);

var paths = data.split(‘,’);

بعد كدا عملت تاج صورة وعملت لووب عشان تحط كل لينك ف تاج وتعمله append ف الصفحة

كود:
for(var i = 0; i < paths.length; i++) {

html += ‘<img src=”‘ + paths[i] + ‘”/>’;

}

$(element)[0].innerHTML = html;

انتا ممكن تستخدم الاسلوب دا عشان تعمل لودينج لأي حاجة ممكن يكون فايل جافاسكربت او سي اس اس او حتى انيميشن معين يتنفذ لحاجة موجودة ف الصفحة او حاجة هتحملها بالاسلوب دا ف الصفحة.

Advertisements

Please, Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: