مناقشة معالجة الصور Taobao
صفحة Taobao كبيرة جدًا ، لكنها تفتح بسرعة كبيرة. تستخدم معالجة الصور تحميل التمرير ، مما يعني مكان لفات محور التمرير ومكان تحميل الصورة. ولكن إذا كنت ترغب في التحقق من رمز المصدر الخاص به ، فسوف يستغرق الأمر الكثير من الجهد ، لأن ضغط الكود والاندماج يتم بشكل جيد! نظرًا لأنه يتم تحميل الصورة في التمرير ولا يتم تحميل الصورة أثناء التهيئة ، ثم عند تحديث الصفحة في أسفل الصفحة ، لن يتم تحميل الصفحة السفلية عادة. يبدو أن نهج Taobao (لأنني لم أنظر إلى رمز المصدر الخاص بهم ، استنادًا إلى العمليات) ، المنعش لإعادة الصفحة إلى الأعلى.
تقليد taobao وقم بالتمرير للصور للتحميل
فيما يلي ثلاث طرق للتفكير في:
1.
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Harooms Front-end area-visual area تحميل javaScript </title> <style> img {width: 100 ٪ ؛ margin-bottom: 30px ؛ MINIight: 400px ؛ خلفية اللون: #DDD ؛} </style> </head> <body> <img haroomslazyload = "chrysanthemum.jpg" src = ""> <img haroomslazyload = "desert.jpg" src = "" " haroomslazyload = "headrangeas.jpg" src = ""> <img haroomslazyload = "koala.jpg" src = ""> <img haroomslazyload = "lighthouse.jpg" src = "" " haroomslazyload = "tulips.jpg" src = ""> <script> var imgnum = document.getElementSbyTagName ('img'). الطول ؛ var imgobj = document.getElementSbyTagName ("img") ؛ var l = 0 ؛ window.onscroll = function () {var seeheight = document.documentElement.clientheight ؛ var scrolltop = document.documentElement.scrolltop || document.body.scrolltop ؛ لـ (var i = l ؛ i <imgnum ؛ i ++) {if (imgobj [i] .offsettop <seeheight+scrolltop) {console.log (imgobj [i] .getAttribute ("src")) ؛ console.log (imgobj [i] .src) ؛ if (imgobj [i] .getAttribute ("src") == "") {imgobj [i] .src = imgobj [i] .getAttribute ( }} if (imgobj [i] .offSetTop> seeheight + scrolltop) {l = i ؛ استراحة؛ }}}} </script>يرجى الانتباه إلى مخرجات وحدة التحكم الخاصة بي ، Console.log (imgobj [i] .SRC) ؛ للحصول على عنوان المتصفح بأكمله!
2.
وترجم JS أعلاه مع jQuery!
var l = 0 // js method translation إصدار $ (window) .bind ("scroll" ، function (event) {for (var i = l ؛ i <$ ("img"). length ؛ i ++) {if ($ ("img"). if ($ ("img"). if ($ ("img").3. تمديد تحميل المنطقة البصرية
على سبيل المثال ، تأثير الرسوم المتحركة أو صورة قماش ، فإن التأثير الذي أريد تحقيقه هو أنه لا يتم تحميله في البداية. عند التمرير على الرسوم المتحركة أو المخطط ، سيتم تحميله. ثم يمكننا إجراء التحسينات التالية بناءً على الكود أعلاه:
$ (window) .bind ("scroll" ، function (event) {// ارتفاع النافذة + ارتفاع الجزء العلوي غير المرئي = ارتفاع الجزء السفلي من الشاشة من to to thisbuttomtop = parseint ($ (window) .height ()) + parseint ($ (window) .scrolltop () ؛ الجزء العلوي من الشاشة من Top Var PictureTop = parseint ($ (window) .offset () وظيفة التحميل الخاصة بك هنا ، وسيتم نقل وظيفة التحميل من المستند الأصلي إلى هنا!تحديث العودة إلى الأعلى
عندما نقوم بتحميل المنطقة البصرية ، عادة ما ندعها تحديث إلى الأعلى. مثل توباو. تحديث العودة إلى الأعلى.
لا أعرف كيف يفعل Taobao ذلك. تحديث مرة أخرى إلى الأعلى ، استخدمت حدث OnBeforeUnload.
OnBeforeUnload and OnUnload ، يتم استدعاء OnUnload و OnBeforeUnload عند التحديث أو الإغلاق. يمكن تحديدها في البرنامج النصي <script> من خلال window.onunload أو في <body>. الفرق هو أنه يتم تنفيذ OnBeforeUnload قبل OnUnload ، ويمكنه أيضًا منع تنفيذ OnUnload.
يتم استدعاء OnBeforeUnload أيضًا عند تحديث الصفحة أو إغلاقها. يتم استدعاء OnBeforeUnload عندما يكون على وشك الانتقال إلى الخادم لقراءة صفحة جديدة ، لكنها لم تبدأ في قراءتها بعد. قرأ OnUnload الصفحة الجديدة التي يجب تحميلها من الخادم ، ويتم استدعاؤها عندما تكون الصفحة الحالية على وشك استبدالها. لا يمكن لـ OnUnload منع تحديثات الصفحة والإغلاق. و onbeforeunload يمكن أن تفعل ذلك.
1. يتم تنفيذ التحميل فقط عند تحميل الصفحة
2. عندما يتم إغلاق الصفحة ، قم بتنفيذ OnBeforeunload أولاً ، وأخيراً onUnload
3. عند تحديث الصفحة ، قم أولاً بتنفيذ OnBeforeNoad ، ثم OnUnload ، وأخيراً Onload.
إن التحديث إلى الأعلى هو استخدام هذا الحدث ، يمكنك كتابته مثل هذا.
window.onbeforeunload = function () {$ (window) .ScrollTop (0) ؛}عند استخدام جميع الصور الموجودة على الموقع ولكن يتم تحميل المنطقة ، ويتم دمج CSS و JS وضغطها ، وسيتم تحسين سرعة موقعنا وأدائنا!
إذا كنت ترغب في القيام بذلك مثل Taobao ، فيمكنك تحسين الرمز.
في الواقع ، تتمثل فكرة تأخير التحميل في وضع الصورة في SRC أو خاصية أولاً. عندما تنزلق الصفحة إلى المنطقة المرئية ، قم بتعيين عنوان الصورة المخزنة إلى SRC.
لن أدرج الكود هنا.