jQuery: وثيقة جاهزة حرائق مبكرة جدا لمتطلباتي

Question

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

أزلت الوظيفة الجاهزة المستند واستبدالها بدالة جيدة "OL Window.Onload"، حيث أنني قرأت بشكل صحيح، هذه الوظيفة لا تطلق النار حتى يتم تحميل الصور بالكامل.

سؤالي هو، هل سيؤدي هذا إلى أي مشاكل؟ وهل هناك أي حلول أخرى فاتني ربما؟

شكرا لمساعدة اللاعبين!!

Answer 1

لا يوجد سبب لا يمكنك استخدامه $(window).load() في مقابل $(document.ready(). وبعد أنت صحيحة حول الوظيفة التي لا تطلق النار حتى يتم تحميل الصور بالكامل (أو فشل التحميل).

العيب بالاعتماد الكامل على $(window).load() هل هذا في بعض الحالات هو واضح بسهولة لا من جافا سكريبت الخاص بك يعمل (أي التنقل أو انقر فوق الأحداث) حتى يتم تحميل كل عنصر واحد على صفحتك. بعض المستخدمين، وعادة ما يكون مستخدمي الطاقة في موقع الويب، انقر عبر الصفحات بسرعة كبيرة وهذا ينتقص من تجربة المستخدم الإجمالية.

ال متوسطة سعيد سيكون ل استعمال $(window).ready() لمعظم المواقف و وضع الأحداث فقط في الداخل $(window).load() التي تتطلب تماما لهم.

Answer 2

جرب هذا بدلا من ذلك:

$(window).load(function() {
 alert("images are loaded!");
});

انظر هذا الرابط للمقارنة بين $(document).ready() و $(window).load()

http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

Answer 3

altough window.onload سوف تناسب احتياجاتك، أود أن أوصي بسرير الأشياء قليلا:

$("img.load").load(function(){
    alert($(this).width());
});

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

Answer 4

إليك حل بسيط للغاية:

تشمل width="" و height="" سمات لجميع الصور. سيؤدي ذلك إلى إجبار المتصفح على تقديم كل شيء بشكل صحيح وفي مكانه حتى قبل تحميل الصور. سيتم تخصيص المساحة المطلوبة لكل صورة في العقارات في الصفحة جانبا بشكل صحيح أثناء تحميل الصور.

هذا هو!

إذا فعلت ذلك، document.ready سوف تعمل على ما يرام في السيناريو الخاص بك. ما يحدث هو أن المتصفح لا يعرف حجم الصور قبل استرداده / تحميله، لذلك يتعين على المتصفح تخمينه. يمكن أن يسبب السلوك مضحك. تحديد عرض وصورك سوف يحل هذه المشكلة.

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

على أي حال، آمل أن تعلمت شيئا جديدا. ؛)

Answer 5

هل يمكن أن تستخدم استخدام load() الحدث في jQuery., ولكن في الوثائق مذكورة أنه قد لا يعمل كما هو متوقع إذا تم تحميل العنصر بالفعل.

ملاحظة: سيتم تحميل الحمل إلا إذا قمت بتعيينه قبل تحميل العنصر بالكامل، إذا قمت بتعيينه بعد ذلك، فلن يحدث شيء. هذا لا يحدث في $ (المستند) .Ready ()، الذي يعالجه JQuery من العمل كما هو متوقع، أيضا عند إعداده بعد تحميل DOM. - http://docs.jquery.com/events/load.

Answer 6

إذا كنت ترغب في تأخيرها بمقدار الوقت المعطى، فيمكنك استخدام "Settimeout" :)