ثلاث طرق ومزايا وعيوب في تحقيق التحميل المسبق للصور

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

الطريقة 1: استخدم CSS و JavaScript لتنفيذ التحميل المسبق

هناك العديد من الطرق لتنفيذ الصور المسبقة ، بما في ذلك استخدام CSS و JavaScript ومجموعات مختلفة من الاثنين. يمكن لهذه التقنيات تصميم الحلول المقابلة وفقًا لسيناريوهات التصميم المختلفة ، والتي تكون فعالة للغاية.

يمكن أن يؤدي استخدام CSS بمفرده إلى التحميل المسبق وكفاءة ، والرمز كما يلي:

نسخة الكود كما يلي:

#preload-01 {background: url (http: //domain.tld/image-01.png) no-repeat -999px -9999px ؛ }

#preload-02 {background: url (http: //domain.tld/image-02.png) no-repeat -9999px -9999px ؛ }

#preload-03 {background: url (http: //domain.tld/image-03.png) no-repeat -9999px -9999px ؛ }

من خلال تطبيق محددات الهوية الثلاثة هذه على عنصر HTML (X) ، يمكننا تحميل الصورة على الخلفية خارج الشاشة من خلال خاصية خلفية CSS. طالما تظل مسارات هذه الصور كما هي ، يستخدم المتصفح صورًا محملة مسبقًا (ذاكرة التخزين المؤقت) أثناء تقديمها عندما يتم استدعاؤها في مكان آخر على صفحة الويب. بسيطة وفعالة ولا تتطلب أي جافا سكريبت.

على الرغم من أن هذه الطريقة فعالة ، إلا أن هناك مجالًا للتحسين. يتم تحميل الصور المحملة باستخدام هذه الطريقة مع محتويات أخرى من الصفحة ، مما يزيد من وقت التحميل الكلي للصفحة. لحل هذه المشكلة ، أضفنا بعض رمز JavaScript لتأخير وقت التحميل المسبق حتى يتم تحميل الصفحة. الرمز كما يلي:

نسخة الكود كما يلي:

// أفضل صورة مسبق @ <a href = "http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/" preloader () {

if (document.getElementById) {

document.getElementById ("preload-01"). style.background = "url (http: //domain.tld/image-01.png) no-repeat -999px -9999px" ؛

document.getElementById ("preload-02"). style.background = "url (http: //domain.tld/image-02.png) no-repeat -999px -9999px" ؛

document.getElementById ("preload-03"). style.background = "url (http: //domain.tld/image-03.png) no-repeat -999px -9999px" ؛

}

}

وظيفة addLoadevent (func) {

var oldonload = window.onload ؛

if (typeof window.onload! = 'function') {

window.onload = func ؛

} آخر {

window.onload = function () {

if (oldonload) {

oldonload () ؛

}

func () ؛

}

}

}

addLoadevent (preloader) ؛

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

في الجزء الثاني من هذا البرنامج النصي ، نستخدم وظيفة addLoadevent () لتأخير وقت التحميل لوظيفة preloader () حتى يتم تحميل الصفحة.

ماذا يحدث إذا لم يعمل JavaScript بشكل صحيح في متصفح المستخدم؟ الأمر بسيط للغاية. لن يتم تحميل الصورة مسبقًا. عندما تستدعي الصفحة الصورة ، سيتم عرضها بشكل طبيعي.

الطريقة 2: استخدم JavaScript فقط لتنفيذ التحميل المسبق

تكون الطريقة أعلاه في بعض الأحيان فعالة للغاية ، لكننا نجد تدريجياً أن الأمر يتطلب الكثير من الوقت في التنفيذ الفعلي. بدلاً من ذلك ، أفضل استخدام JavaScript Pure لتحميل الصور. يتم توفير طريقتين للتحميل المسبق أدناه ، والتي يمكن أن تعمل بشكل جميل على جميع المتصفحات الحديثة.

قطاع رمز JavaScript 1

من السهل التنفيذ ببساطة عن طريق تحرير وتحميل مسار واسم الصورة المطلوبة:

نسخة الكود كما يلي:

<viv>

<script type = "text/javaScript">

<!-//-> <!

وظيفة preload () {

لـ (i = 0 ؛ i <preload.arguments.length ؛ i ++) {

الصور [i] = صورة جديدة ()

الصور [i] .src = preload.arguments [i]

}

}

التحميل المسبق (

"http: //domain.tld/gallery/image-001.jpg" ،

"http: //domain.tld/gallery/image-002.jpg" ،

"http: //domain.tld/gallery/image-003.jpg"

)

//-> <!]]> </script>

</div>

هذه الطريقة مناسبة بشكل خاص لتحميل أعداد كبيرة من الصور. يستخدم موقع الويب الخاص بي هذه التكنولوجيا ولديه أكثر من 50 صورة تم تحميلها مسبقًا. قم بتطبيق البرنامج النصي على صفحة تسجيل الدخول ، وطالما يدخل المستخدم حساب تسجيل الدخول ، سيتم تحميل معظم صور المعرض مسبقًا.

مقتطف JavaScript 2

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

نسخة الكود كما يلي:

<viv>

<script type = "text/javaScript">

<!-//-> <! [cdata [///> <!-if (document.images) {

IMG1 = صورة جديدة () ؛

IMG2 = new Image () ؛

IMG3 = new Image () ؛

img1.src = "http: //domain.tld/path/to/image-001.gif" ؛

img2.src = "http: //domain.tld/path/to/image-002.gif" ؛

img3.src = "http: //domain.tld/path/to/image-003.gif" ؛

}

//-> <!]]> </script>

</div>

كما يمكن أن نرى ، يتطلب كل صورة تحميل إنشاء متغير ، مثل "IMG1 = New Image () ؛" وإعلان عنوان مصدر الصورة ، مثل "img3.src =

"../path/to/image-003.gif" ؛ ". راجع هذا الوضع ، يمكنك تحميل أكبر عدد ممكن من الصور.

لقد قمنا بتحسين هذه الطريقة مرة أخرى. قم بتغليف البرنامج النصي في وظيفة واستخدم addLoadevent () لتأخير وقت التحميل المسبق حتى يتم تحميل الصفحة.

نسخة الكود كما يلي:

وظيفة preloader () {

if (document.images) {

var img1 = new image () ؛

var img2 = new image () ؛

var img3 = new image () ؛

img1.src = "http: //domain.tld/path/to/image-001.gif" ؛

img2.src = "http: //domain.tld/path/to/image-002.gif" ؛

img3.src = "http: //domain.tld/path/to/image-003.gif" ؛

}

}

وظيفة addLoadevent (func) {

var oldonload = window.onload ؛

if (typeof window.onload! = 'function') {

window.onload = func ؛

} آخر {

window.onload = function () {

if (oldonload) {

oldonload () ؛

}

func () ؛

}

}

}

addLoadevent (preloader) ؛

الطريقة 3: استخدم Ajax لتنفيذ التحميل المسبق

يبدو أن الطريقة الواردة أعلاه ليست باردة بما فيه الكفاية ، لذا دعونا الآن ننظر إلى طريقة تستخدم AJAX لتنفيذ التحميل المسبق للصور. تستخدم هذه الطريقة DOM ، ليس فقط الصور المسبقة ، ولكن أيضًا مسبقًا CSS و JavaScript وغيرها من الأشياء ذات الصلة. يعد استخدام Ajax أفضل من استخدام JavaScript مباشرة ، والميزة هي أن تحميل JavaScript و CSS لن يؤثر على الصفحة الحالية. هذه الطريقة بسيطة وفعالة.

نسخة الكود كما يلي:

window.onload = function () {

setTimeout (function () {

// XHR لطلب JS و CSS var XHR = جديد XMLHTTPREQUEST () ؛

XHR.Open ('get' ، 'http: //domain.tld/preload.js') ؛

XHR.SEND ('') ؛

XHR = جديد XMLHTTPREQUEST () ؛

XHR.Open ('get' ، 'http: //domain.tld/preload.css') ؛

XHR.SEND ('') ؛

// preload image image ().

} ، 1000) ؛

} ؛

تم تحميل الرمز أعلاه مسبقًا بـ "preload.js" ، "preload.css" ، و "preload.png". تتمثل المهلة التي تبلغ 1000 مللي ثانية في منع البرنامج النصي ، مما يسبب مشاكل وظيفية في الصفحة العادية.

أدناه ، دعونا نرى كيفية تنفيذ عملية التحميل باستخدام JavaScript:

نسخة الكود كما يلي:

window.onload = function () {

setTimeout (function () {

// الإشارة إلى <head>

var head = document.getElementSbyTagName ('head') [0] ؛

// CSS جديد

var css = document.createElement ('link') ؛

css.type = "text/css" ؛

css.rel = "ورقة الأنماط" ؛

css.href = "http: //domain.tld/preload.css" ؛

// A JS جديد

var js = document.createElement ("script") ؛

JS.Type = "Text/JavaScript" ؛

js.src = "http: //domain.tld/preload.js" ؛

// preload JS و CSS Head.AppendChild (CSS) ؛

Head.AppendChild (JS) ؛

// صورة مسبق

new Image (). src = "http: //domain.tld/preload.png" ؛

} ، 1000) ؛

} ؛

هنا ، نقوم بإنشاء ثلاثة عناصر من خلال DOM لتنفيذ التحميل المسبق لثلاثة ملفات. كما ذكر أعلاه ، مع Ajax ، لا يتم تطبيق ملف التحميل على صفحة التحميل. من وجهة النظر هذه ، فإن طريقة AJAX متفوقة على JavaScript.

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