تحميل صور المتصفح مع حدث JavaScript؟

Question

لدي صفحة تحتوي على الكثير من الصور ، والتي يتم إخفاءها في البداية عن العرض لأنني أستخدم divs tabbed (أي إخفاء بعض divs باستخدام عرض CSS: لا شيء).

لذلك ، عندما يتم تحميل الصفحة في ذلك الوقت ، يستغرق تحميل جميع الصور ، الأمر الذي يبدو أن الصفحة بطيئة (لأن شريط التحميل على المتصفح لا يكتمل لمدة 10 ثوانٍ).

أرغب في عدم تحميل الصور حتى تكون مرئية على الصفحة.

لقد لعبت مع jQuery Lazyload, ، ومع ذلك ، يبدو أن هذا لا يحمل الصور إلا عند تمرير المتصفح (والذي لا يعمل مع divs tabbed).

لذلك ، هل هناك طريقة لتغيير Lazyload للعمل مثل هذا ، أم أن هناك طريقة أفضل للقيام بذلك؟

شكرًا!

Answer 1

لم أكن على دراية بهذا سابقًا ، لكن Lazyload لا يدعم الحدوث من الأحداث:

http://www.appelsiini.net/projects/lazyload

إذا كان أي شخص بحاجة إلى يد على كيفية قيامني بذلك ، فأخبرني!

Answer 2

يمكن علامات تبويب jQuery يمكن أن تفعل ما تحتاجه ، مع Ajax Call على علامات التبويب ...

كيف تعرض divs الخفية الخاصة بك؟

Answer 3

خطة واحدة للهجوم:

بدلاً من وضع عنوان URL للصورة في سمة SRC لعلامة IMG ، ضعها في مكان آخر (على سبيل المثال فترة خفية مع فئة معينة فوقه) وعند إظهار DIV ، قم بالتكرار من خلال جميع علامات IMG وتعيين SRC على عنوان URL كان ينبغي أن يكون.

كطريقة ، بالتأكيد حصلت على بعض الجوانب السلبية.

Answer 4

إذا كنت تستخدم (أو يمكنك استخدام) Doctype HTML5 ، فيمكنك استخدام بادئة "البيانات-" لسمات العلامات:

<img src="" data-src="/path/to/image" style="display: none" />

وبعد ذلك يمكنك استخدام JavaScript لملء SRC بالبيانات SRC:

$(SELECTOR).attr("src", $(SELECTOR).attr("data-src"));

Answer 5

إذا كان هدفك الوحيد هو "إخفاء" شريط التقدم الذي يستغرق وقتًا طويلاً بسبب العدد الكبير من الصور ، فسأذهب إلى نوع من حل Ajax ، حيث لا يتم استخدام شريط التقدم بهذه الطريقة. إنه يقدم المزيد من التعقيد في الطريقة التي تريد بتحميلها عناصر HTML (وربما عندما).

أنا شخصياً لا أحب استخدام سمات HTML لأي شيء آخر غير الغرض الأصلي ، لذا فإن تخزين المسار في سمة أخرى والتبديل عند الحاجة لن يكون خياري الأول. بدلاً من ذلك ، سأحاول إنشاء مجموعة JavaScript (ID => PATH) وتحديث عناصر HTML IMG المنفصلة عند الحاجة.

حظا طيبا وفقك الله! ؛)

Answer 6

لقد حاولت ذلك مؤخرًا ويجب أن أقول إن هذا غير ممكن مع JS بعد الآن. ربما لم يكن الأمر كذلك ... لقد أعلنت مشاريع مثل Lazyload دائمًا أنها ستمنع جميع الصور من التحميل عند بدء التشغيل ، ولكن يمكنك أن ترى في Firebug أن هذا لا يعمل. يتم تحميل الصور مرتين ، على DomReady وعندما تبدأ التمرير ...

ستكون اختياراتك الوحيدة هي Ajax في متناول اليد أو تفعل شيئًا كهذا:

<img src="transparent.gif" alt="" rel="real image source" />

ثم قم بتبديل السمات عندما تصبح divs مرئية ، لذلك تبدأ الصورة في التحميل.

هذا يعمل بشكل جيد على الأقل إذا كنت لا تحتاج إلى فهرسة Google.

امل ان يساعد! قون

تحرير: HM ، لماذا حصلت على -1 عندما كنت مجرد إجابة؟ ما عليك سوى إلقاء نظرة على الصفحات مع Lazyload وتمكين Firebug ثم قم بالتمرير للصفحة. لقد قيل حتى هنا على Stackoverflow وفي التعليقات على المكون الإضافي Lazyload أن هذا هو الحل الوحيد في الوقت الحالي ... :(