الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

إظهار الصفحة مرة واحدة

بدأه موظف في 30 أغسطس 2009 · 14 رد · 1,256 مشاهدة · في منتدى تطوير المواقع بـ PHP
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

السلام عليكم و رحمة الله و بركاته

هناك مسألة مزعجة تواجهني في كل موقع و لا أعرف الحل لها.

عندما آخذ تصميم الجرافيكس للموقع من مصمم الجرافيكس أقوم بتقطيعه ببرنامج ال Adobe Fireworks CS3 ، أكمل العمل بعدها و يتم تركيب هذا التقطيع على صفحات الموقع. بعد رفع الموقع على الإنترنت يعمل كما يجب، لكن المشكلة التي أعنيها هو أنه عندما تفتح الصفحة يبدأ تحميل قطع الجرافيكس للتصميم و تظهر واحدة وراء الأخرى في الموقع إلى أن يكتمل ظهور الصفحة كاملاً. لاحظت أن كثير من المواقع لا تعاني من هذه المشكلة، بل يتم ظهور التصميم للصفحات بما فيه من جرافيكس دفعة واحدة حتى و إن تأخر قليلاً تحميل الصفحة، المهم أنها عند تحميلها تظهر كاملة دفعة واحدة بكل الجرافيكس الذي فيها !.

كيف أستطيع التخلص من التحميل المتتابع هذا لجرافيكس الموقع و إظهاره دفعة واحدة؟!

أرجو المساعدة،،،

شكراً للجميع

#2

هناك نفس الموضوع في منتدى تطبيقات الويب إبحث عنه فهو غني بالمعلومات حول هذا الموضوع

CMS Sfhati , Website Generator


نظام إدارة المحتوى صفحتي ... جربه الآن 


 


small-logo.png

#3

اعتقد الحل في الموضوع السابق كان استخدام javascript

لكن وجهه نظري... لا تستخدم javascript للسبب هذا فقط. يعني فعلا فيه تصعيب عليك في التعامل مع الاشخاص بدون javascript في متصفحاتهم (مثلي!!) و الحل بسيط... استخدم جرافكس ابسط

php5-zce-logo-new.gif

CCNA, CCNA Security, CCNP

#4

شكراً لك أخي " bastr3 " على ردك، وجدت المشاركة التي تقصدها و هذا رابطها لمن يود الإطلاع عليها:

نفس الموضوع في منتدى تصميم صفحات الويب

شكراً أخي " Ryn " على نصيحتك، الحقيقة أنني مثلك أفضل إستخدام حل لا يتضمن جافاسكربت لنفس السبب الذي ذكرت.

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

أقول " نصف حل " لأنه لم يظهر له أثر أثناء فتح الموقع بال Firefox و لم يعمل كما أريد، لكن عند فتحه بال IE أصبحت تظهر الصور دفعة واحدة كما أريد الأمر تماماً.

الذي قمت به هو الآتي:

في ملف الستايل الرئيسي و هو style.css و ضعت ال CSS Rule:

img{display: none;}

و الغاية منها منع عرض الصور في أي صفحة مربوطة بملف الستايل هذا.

أيضاً أنشأت ملف ستايل آخر إسمه preloader.css، و فيه CSS Rule واحدة فقط و هي العكسية الآن:

img{display:block;}

و الغاية منها عرض الصور في أي صفحة مربوطة بملف الستايل هذا.

الآن، ملف الستايل الأول الأساسي تم ربطه بكل صفحة بالموقع بموقعه المعتاد في كود الصفحة، و هي قبل ال

</head>

. أما الملف الآخر فقد تم بالصفحة قبل نهاية الكود لها مباشرة، أي قبل

</body>

، و هكذا أصبحت الصفحة تقوم بمنع ظهور الصور أولاً لكن تحملها فعلياً و تقوم بتنفيذ كودها كاملاً، ثم بعد الإنتهاء من تحميل و تنفيذ كل شيء تعود للسماح بعرض الصور فتظهر دفعة واحدة لأنها حملت أولاً.

و بإنتظار حل الأمر مع الفايرفوكس.

شكراً للجميع،،،

#5

استخدم

visibility:visible;

و

visibility:hidden;

الاولى للاظهار والثانيه للاخفاء

مع اني لا اعرف لماذا لم يعمل كودك واسف لا استطيع ان اجربه حاليا

جرب ان تجعل

display فارغا في حالة اظهار النتائج !

[moveleft]

MiN! SpId3r SqUaD

[/moveleft]

#6

هل جميع الصور يتم إستدعاؤها من خلال ملفات الستايل أم أن بعض الصور متضمنه من ضمن ملف الصفحة الرئيسي ؟

أعتقد إذا كانت جميع الصور يتم إستدعاؤها من ملف الستايل فلن تظهر هذه المشكله بأي متصفح لأنه يقوم بإستدعاء ملف الستايل كامل مع الصور ثم يظهره

CMS Sfhati , Website Generator


نظام إدارة المحتوى صفحتي ... جربه الآن 


 


small-logo.png

#7

الامر يستهدف التاك img

لما يجب ان تكون الصور من ملف الستايل؟

تامفروض انه يؤثر على كل وسوم الimg التي في التصميم ! ام ماذا؟

[moveleft]

MiN! SpId3r SqUaD

[/moveleft]

#8

السلام عليكم و رحمة الله و بركاته

شكراً لجميع الأخوة الكرام الذين شاركوا بالموضوع.

أخي " Ryn " كنت نسيت أن أخبرك أن الحل الذي تفضله بإستخدام جرافيكس أبسط هو حل رائع أفضله أيضاً، لكن سبحان الله أحياناً لا تحصل الأمور بهذا الترتيب، ففي الغالب يتم تسليمي التصميم لأبدأ العمل عليه بعد أن يكون مسوؤلي المبيعات قد رتبوا الأمر مع العميل بالتنسيق مع المصمم، بل أحياناً أخرى يأتي العميل بتصميمه هو و ملف فوتوشوب من عنده هو، لذلك فهناك مواقف يكون أحدنا في إضطرار للتعامل مع تصميم فيه جرافيكس غير بسيط.

شكراً لك على إقتراحك أخي " MiNi.SpIdEr "، بعد قرائتي لمشاركتك قمت بتجربة ما ذكرته و استخدمت خاصية ال visibility بدلاً من ال display ، النتيجة كانت واحدة و لم يختلف الأمر، أصبح الموقع يعرض جميع الصور دفعة واحدة و ليس قطعة وراء الأخرى لكن ليس على متصفح الفايرفوكس.

أخي " bastr3 "، فرحت كثيراً بكلامك عن استدعاء الصور من ملف الستايل و أشعر أنه بإذن الله يحمل في طياته الحل لذات السبب الذي ذكرته أن نوع المتصفح حينها لن يسبب أي مشكلة لأن جميعهم سيقومون بإستدعاء ملف الستايل كامل. لكن ما إن حاولت الشروع بتطبيق هذا الكلام على مستوى الكود حتى واجهتني مشكلة " كيف يكتب الكود الذي يستدعي صور جميع قطع التصميم من ملف الستايل" ؟!. كما ظننت أنت فالصور متضمنة بكود الصفحة و ليست في ملف الستايل، و السبب في ذلك هو أنني بعد تقطيع تصميم الجرافيكس ببرنامج ال Fireworks أقوم بتصديره كصفحة HTML و يتم توليد جدول HTML يحوي صور قطع التصميم، فمثلاً هذه بداية كود جدول التقطيع:

<table border="0" cellpadding="0" cellspacing="0" width="905">
<!-- fwtable fwsrc="Untitled" fwpage="Page 1" fwbase="header.jpg" fwstyle="Dreamweaver" fwdocid = "2095025025" fwnested="0" -->
  <tr>
   <td><img src="images/slices/spacer.gif" width="14" height="1" border="0" alt="" /></td>
   <td><img src="images/slices/spacer.gif" width="51" height="1" border="0" alt="" /></td>
   <td><img src="images/slices/spacer.gif" width="72" height="1" border="0" alt="" /></td>
   <td><img src="images/slices/spacer.gif" width="29" height="1" border="0" alt="" /></td>

و الجدول كبير نوعاً ما و يحوي عدد غير قليل من صور قطع التصميم.

لو كان الأمر مجرد خلية واحدة في الجدول أو div ما أريد إستدعاء صورتها كخلفية من ملف الستايل كنت قمت بكتابة ستايل كالتالي:

background:url(images/myimage.jpg);

مع تحديد هذه الخلفية لأي div مثلاً بدلالة ال ID لها و تحديد الإرتفاع و العرض للصورة الخلفية. لكن لا أعرف كيف من الممكن إجراء الأمر على مستوى الكود بالنسبة لتقطيع جدول يحوي مجموعة كبيرة من الصور بأبعاد مختلفة، هل خاصية ال background في ال CSS تفي بالغرض و من الممكن أن تقبل أكثر من background ؟!

أرجو أن يكون هناك طريقة من الممكن إيضاحها لطريقة إستدعاء الصور من ملف الستايل.

أخي " MiNi.SpIdEr "، كما ذكرت في تساؤلك، الأمر سيؤثر على جميع ال img tags التي في كود الصفحة، و لا أجد ضير في ذلك، الفكرة كانت تقتضي بالأساس ( فكرة ملفي الستايل الذين ذكرت أني أنشأتهم style.css و preloader.css ) بأن يقوم الأول بتحميل كل صور الموقع قبل البدء بكود الصفحة لكن مع منع إظهارهم و بذلك يبدأ كود الصفحة و جميع صورها موجودة فعلياً خلف الكواليس، و الثاني السماح بإظهار جميع صور الموقع مع مراعاة أن يأتي دوره في نهاية كود الصفحة قبل body/> مباشرة و بذلك يتم عرض صور الموقع دفعة واحدة، و هو المطلوب، لولا ظهور مشكلة عدم نجاح الأمر مع الفايرفوكس كما ذكرنا.

#9

عندما ذكرت أن التصميم يأتيك وأنت تقوم بتقطيعه على برامج مثل فوتوشوب أو دريم ويفر أو غيرها تأكدت أنك تستخدم الجداول .,, عندما ذكر اخي ريان أن التصميم البسيط يفي بالغرض كان يقصد إستخدام الستايل فمهما كان التصميم من خلال الستايل سيظهر بشكل جميل ويحتوي على صور أقل وبذلك يكون التصفح أسرع

ﻻ ضير من استخدام الجداول ولكن الديف تعطي دايناميكيه أعلى بكثير

بعد إذنك ضع هنا صورة التصميم لنرى ماهي إمكانيات تقطيع التصميم ومنها تأخذ فكرة عن التقطيع الصحيح إذا صح التعبير

CMS Sfhati , Website Generator


نظام إدارة المحتوى صفحتي ... جربه الآن 


 


small-logo.png

#10

أخي " bastr3 "، أوافقك تماماً على كلامك أن الديف أفضل من الجداول و إن كان لا ضير من إستخدام الجداول. لكن من مشاكلي حقيقة في هذا الأمر هو أني - لأسباب كثيرة - ما زلت لا أستطيع التوقف عن إستخدام ال IE6 ، لما بدأت مسألة تطوير مواقع الإنترنت قبل حوالي السنة و نصف كنت قد قرأت أن أسلوب الديف هو الأسلوب الإحترافي و الأقضل و حاولت الإلتزام به، لكن للأسف كان دائماً يظهر لي مشاكل كثيرة مع ال IE6 و يأخذ مني الأمر عادة وقت طويل لضبط الأمر و غالباً كان من خلال عمل ملف ستايل ثاني خاص بال IE6 - كنت أسميه عادة ie-hack-style.css - ، لكن مع أسلوب الجداول كان يجري الأمر بسلاسة و يعمل كل شيء كما يجب، لذا فضلت التمسك بأسلوب الجداول إلى أن ييسر الله لي شيئاً آخر.

لهذا ما زال الأهم لي هو إيجاد طريقة لإستدعاء صور قطع التصميم من ملف الستايل لصفحة أنشأت بأسلوب الجداول و ليس الديف.

بالنسبة لإرفاق التصميم لإمكانية إيجاد طريقة تقطيع أنسب، فلأني انتهيت من التقطيع و صعب علي الآن اعتماد أسلوب تقطيع جديد فربما لن يكون من حاجة للسعي بتقطيع جديد فما أرفقت التصميم لذلك.

شكراً لك أخي " bastr3 ".

#11

العفو أخي موظف ولكن للعلم جووجل قامت بإلغاء الدعم لإستخدام إكسبلولر 6 وتويتر أيضا وهذا دافع لك لكي لاتعتمد هذا المتصفح فقط أصبح عجوزا كفايه , وبالنسبه لأصحاب العمل فقط أريهم موقعهم على إكسبلولر 8 أو فيرفوكس وقل لهم إذا جووجل مش قادره تتعامل مع هالمتصفح إكسبلولر 6 فكيف بي أنا العبد الفقير !!!

CMS Sfhati , Website Generator


نظام إدارة المحتوى صفحتي ... جربه الآن 


 


small-logo.png

#12

شكراً لك أخي "bastr3" كثيراً على هذا الخبر:)، أرحتني و الله، أراحك الله في نفسك و بدنك.

سأبحث عن نص هذا الخبر في الإنترنت، لكن أرجو فضلاً لا أمراً إن وجدت لديك الوقت الكافي و كنت تعرف رابط لهذا الخبر أن تضعه هنا.

شكراً لك مرة أخرى:).

#13

المشكله هناك الكثير ما زالوا يستخدمونه

حقيقتا هو يخرب التصميم ايضا حيث هناك ما يجب الاستغناء عنه ايضا بسبب هذا المتخلف

[moveleft]

MiN! SpId3r SqUaD

[/moveleft]

#14

http://www.tech-wd.com/wd/2009/07/15/youtube-ie6/

http://www.tech-wd.com/wd/2009/08/05/ie6-no-more/

تم تعديل هذه المشاركة بواسطة bastr3 في 8 سبتمبر 2009 في 03:43

CMS Sfhati , Website Generator


نظام إدارة المحتوى صفحتي ... جربه الآن 


 


small-logo.png

#15

شكراً لك أخي "bastr3" كثيراً، الله يعطيك العافية:).

مواضيع مشابهة