Ng-lazyload-image: TypeError: لا يمكن قراءة الخاصية "toLowerCase" غير المعرفة عند تحميل الصفحة من الوسط إلى الأعلى

تم إنشاؤها على ١٨ يوليو ٢٠١٧  ·  11تعليقات  ·  مصدر: tjoskar/ng-lazyload-image

أهلا،

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

كيفية إعادة الإنشاء: قم بتحميل الصفحة الاختبارية في الجزء العلوي كالمعتاد. قم بالتمرير لأسفل حتى تقترب من منتصف الطريق. الآن قم بتحديث الصفحة وابدأ في التمرير من المنتصف. يجب أن ترى خطأ في العقدة. إذا لم يكن الأمر كذلك ، فتأكد من استخدام حدث إخراج onLoad. إذا قمت بالتمرير إلى الأعلى ، فسترى بدء تشغيل حدث onLoad فجأة.

التعليق الأكثر فائدة

ال 11 كومينتر

أهلا،

لا يمكنني إعادة إنتاج هذا: /
عندما تقول "قم بتحميل صفحتك الاختبارية كالمعتاد". هل تقصد هذه الصفحة: https://tjoskar.github.io/ng-lazyload-image أم أنك تقوم بتشغيل الصفحة محليًا باستخدام npm start ؟

ما المتصفح الذي تستخدمه؟

لسبب ما على github.io لا يمكنني تحديث الصفحة بعد تحميلها مرة واحدة. تقول 404 غير موجود في كل مرة :(

لكن بشكل عام ، أعني محليًا مع أي مشروع - أنا أستخدم Angular 4 مع Universal و Node (لذلك قد يكون للعامة علاقة بهذا). استخدام Chrome 59 لنظام التشغيل Windows 10. أعتقد أن هذا قد يكون خطأً في وظيفة onLoad الجديدة ولكنه ليس إيجابيًا. يظهر الخطأ فقط في وحدة تحكم Node ، ولا يبدو أنه يتسبب في ظهور أي أخطاء في وحدة تحكم Chrome.

مرحبا elitenick ،
هل يمكنك إعطاء أثر مكدس كامل للخطأ؟

تضمين التغريدة
أعتقد أن الخطأ مرتبط بـ https://github.com/tjoskar/ng-lazyload-image/blob/master/src/lazyload-image.ts#L75 ، من قبل هنا سوف يكتشف الخطأ ، لكن منذ ذلك الحين ليس كذلك.
في Angular Universal هنا https://github.com/tjoskar/ng-lazyload-image/blob/master/src/lazyload-image.ts#L47 إنتاج الخطأ ، لأن element في الخادم غير محدد.
أعتقد أن الحل الجيد للمشكلة هو تعطيل الصور البطيئة في جانب الخادم.

لسبب ما على github.io لا يمكنني تحديث الصفحة بعد تحميلها مرة واحدة. تقول 404 غير موجود في كل مرة :(

نعم ، هذا لأن github لا يدعم إعادة توجيه كل الطلبات إلى index.html (لكن هذه مشكلة مختلفة تمامًا)

من المحتمل أن يكون له علاقة بـ Angular Universal ولكن هناك بعض الأشياء التي لا أفهمها:

  1. لماذا لا تحصل على الخطأ إلا عند تحديث الصفحة؟ يجب ألا تحصل العقدة على أي معلومات حول موضع التمرير أو إذا كانت زيارتك الأولى أو الثانية (يجب ألا تحتوي الواجهة الخلفية على أي حالة من هذا النوع).
  2. لنفترض أن هذا الصف هو الذي يسبب المشكلة. إذا كان الأمر كذلك ، فلا يمكن إلغاء تعريف element لأننا ندخل إلى nodeName من element بدون أي أخطاء ، علاوة على ذلك ، نحن نستخدم element in isVisible () وحتى أننا نستخدم window في هذه الوظيفة ، والتي يجب أن تكون غير معرّفة في سياق الخادم.

أعتقد أن هذا قد يكون خطأً في وظيفة onLoad الجديدة ولكنه ليس إيجابيًا

هل تستخدم (onLoad) ؟ هل يمكنك محاولة إزالته ومعرفة ما إذا كان يمكنك إعادة إنتاج الخطأ؟

تضمين التغريدة

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

نعم ، ليس لدي أي معنى لتحميل الصور البطيئة على الخادم (نظرًا لأننا لا نعرف أي شيء عن حجم الشاشة).
ربما يمكننا فقط إضافة if (isPlatformServer(this.platformId)) return; ( المرجع ) في ngAfterContentInit .

elitenick ، لقد نشرت للتو [email protected] مع طلب سحب rimlin . هل يمكنك تثبيته ( npm install [email protected] ) ومعرفة ما إذا كان يحل المشكلة؟

بالتأكيد! سوف نتحقق منه اليوم ونعلمك! شكرا يا شباب.

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

مشمول في [email protected] .

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات