1. خلفية مقدمة
في تطبيق ألبوم الصور عبر الإنترنت ، أبسط حاجة للمستخدمين لعرض الصور. عندما تكون الشبكة أبطأ ، يكون وقت الانتظار لعرض الصور طويلًا نسبيًا ، وستكون تجربة المستخدم سيئة للغاية.
2. الوضع الحالي
هناك طريقتان رئيسيتان لتحميل الصور:
(1) الطريقة الأكثر أصالة لتحميل الصور وعرضها مباشرة على صفحة HTML مع علامة IMG. سيكون لهذه الطريقة عملية انتظار فارغة عندما تكون سرعة الشبكة بطيئة أو أن الصور التي سيتم عرضها كبيرة نسبيًا ، وستكون تجربة المستخدم سيئة.
(2) استخدم أولاً علامة IMG لتحميل الصورة المصغرة للصورة لعرض الصورة على صفحة HTML ، ثم استخدم JavaScript لتحميل الصورة الأصلية للصورة المخفية ، وانتظر حتى يتم تحميل الصورة الكبيرة للصورة قبل عرض الصورة الأصلية على الصفحة. فيما يلي المخطط الانسيابي:
3. حلنا
قامت بعض أساليب التحسين التي تم إجراؤها مؤخرًا بواسطة ألبوم صور QQ بحل أوجه القصور لطريقتي الاستئناف وتلبية احتياجات المستخدمين لعرض الصور: راجع الموقف العام للصور في أقرب وقت ممكن ورؤية الصورة الأصلية الواضحة في أسرع وقت ممكن. تستخدم هذه الطريقة الصور المصغرة والصور الأصلية لتحميل وتراكب العرض في وقت واحد. أولاً ، قم بتحميل الصور المصغرة وتوسيع الشاشة ، ويتم تثبيت الصورة الكبيرة على الصور المصغرة والأحمال في وقت واحد. الصورة المصغرة صغيرة جدًا وعادة ما تتيح للمستخدمين رؤية الصورة غير الواضحة بسرعة. أثناء تحميل الصورة الكبيرة ، تتم تغطية الصورة المصغرة تدريجياً من أعلى إلى أسفل ، بحيث يمكن للمستخدم رؤية الصورة الكبيرة أثناء عملية التحميل.
(1) مثال مخطط
كما هو موضح أعلاه ، فإن خطوات معالجة هذه الطريقة هي:
1). احصل على عنوان URL في صورة الصورة المصغرة والصورة الأصلية ، واحصل على طول وعرض الصورة ؛
2). قم بتحميل وعرض الصور المصغرة للتصوير ، وتمتد الصور المصغرة وفقًا لطول وعرض الفيلم. في هذا الوقت ، يرى المستخدم تأثيرًا غير واضح ؛
3). قم بتحميل الصورة الأصلية وعرضها ، وقم بتركيب الصورة الأصلية على الصورة المصغرة لعرضها. سيتم عرض الصورة الأصلية بقدر ما يتم تحميلها. إذا لم يتم تحميله ، فسيظل يعرض الصورة المصغرة. الكتابة فوق الصورة المصغرة تدريجيا. أثناء عملية التحميل للصورة الأصلية ، يرى المستخدم التأثير التدريجي للصورة من Blur إلى مسح.
4). بعد تحميل الصورة الأصلية ، تم كتابة جميع الصورة الأصلية في الصورة المصغرة ، ويرى المستخدم الصورة الأصلية الحقيقية. في هذا الوقت ، يمكنك إخفاء الصور المصغرة لمنع الصور المصغرة من التدخل في عرض الصور ذات تأثيرات شفافة مثل PNG أو GIF.
(2) نموذج رمز
<!-اضبط حجم الصورة-> <viv> <!-يتم عرض صورة صغيرة بحجم كبير-> <img src = "small_url"/> <!-يتم تثبيت الصورة الأصلية على الصورة الصغيرة-> <img src = "big_url"/> </div>
ما سبق هو المحتوى الكامل لهذه المقالة. لمزيد من المعلومات حول JavaScript ، يمكنك التحقق من: "دليل JavaScript Reference Tutorial" و "JavaScript Code Style". آمل أيضًا أن يدعم الجميع wulin.com أكثر.