كيفية التحميل المسبق الصور حتى انهم تحميلها بشكل أسرع في كل مكان آخر على الصفحة, و هو جيد الممارسة ؟

Question

هنا هو الشيء:لدي خريطة جوجل مع الكثير من العلامات في ذلك.

المشكلة هي أن الخريطة الأحمال ، يبقى فارغا لفترة قصيرة فقط ثم يتم عرض علامات.علامات مخصصة PNGs.

فكرتي هي أن "التحميل المسبق" لهم (لست متأكدا انها كلمة حق) بحيث تظهر تقريبا في نفس الوقت الخريطة.

ما فعلته حتى الآن هو إضافة نفس الصور على الخريطة ، خارج الخريطة ، في وقت سابق في الصفحة display:none;

لست متأكدا ولكن يبدو أن الوقت بين الخريطة يتم عرض الصور تم تخفيض.

هو أفضل طريقة للقيام بذلك, و هو جيد الممارسة ؟

Answer 1

هل يمكن استخدام "العفاريت" أيمجموعة من صور منفصلة في 1 واحد png.هذا يحمل ميزة تتطلب سوى 1 تحميل أيأقل فصل الأحمال.جوجل GWT يدفع هذا الأسلوب الكثير (أيصورة حزم).

قيمة هذا الأسلوب مع زيادة عدد منفصلة الصور التي تتطلب التحميل:المزيد من صور منفصلة ، يعد يستغرق تحميلها.

Answer 2

لا تستخدم display:none للتحميل المسبق. لأن عنصر تعيين ل display:none لا تجعل أي من سماتها البدنية، لا يزعجه المتصفح تنزيله حتى يتم مرئيا.

بديل هو استخدام visibility:hidden, ، لكنك تدير مخاطر الركض إلى وكيل مستخدم يقوم بنفس الشيء إلى حد كبير. visibility:hidden يتطلب من المتصفح حساب نموذج المربع للصورة، والتي تتطلب تحميل الصورة (للحصول على الأبعاد). أنا لا أصدق أن هذا يعمل في IE6، رغم ذلك.

التقنية الأخيرة (ومفضلتي) هي إنشاء div مباشرة قبل </body> بطاقة شعار. موقفها المطلقة مع left: -99999999px; top: -99999999px. وبعد يتم إجبار المتصفح على تقديم الصور (وبالتالي تحميلها) وليس هناك جافا سكريبت فوضوي للتعامل معها.

الآن، لدمج هذا مع مشكلتك، ضع التعليمات البرمجية لخريطة جوجل الخاصة بك بعد لديك "التحميل المسبق DIV". سيتم إجبار متصفحك على تحميل الصور قبل تشغيل التعليمات البرمجية لإنشاء الخريطة. هذا يجب ان يحل مشكلتك.

أتمنى أن يساعدك هذا!

Answer 3

مما أتذكره عن معظم المتصفحات الحديثة، يتم تحميل الصور دائما مرة واحدة (معينة SRC للصورة هي نفسها). أعتقد أنك تعني تحميلها قبل تحميل الخرائط.

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

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

إلقاء نظرة على AJAX في العمل: تحميل الصور