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

لحسن الحظ ، هذه مشكلة في الغالب في التصميم اليوم لأن جعل الصور أداءً وأكثر سهولة في الاستخدام أسهل بكثير مما كانت عليه من قبل. لدينا تنسيقات صور أفضل مثل WebP (وقريباً ، ربما ، JPEG XL). لدينا دورة صور سحرية. وهناك الكثير من الأدوات الرائعة ، مثل ImageOptim ، وكذلك الموارد مثل كتاب Addy Osmani الجديد.

على الرغم من أن طريقتي المفضلة لتحسين أداء الصورة هي التحميل المسلح:

سيتم تحميل هذه الصورة فقط عندما يقوم المستخدم بالتمرير أسفل الصفحة بحيث يكون مرئيًا للمستخدم - الذي يزيلها من تحميل الصفحة الأولية وهذا أمر رائع! إن جعل هذا الحمل الأولي لصفحة الويب LightningFast أمرًا كبيرًا.

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

لذا! ماذا لو استطعنا عرض الصور على موقع ويب ولكن بمجرد النقر عليها أو استغلالها؟ ألن يكون أنيقًا إذا تمكنا من إظهار عنصر نائب وتبديله للصورة الحقيقية عند النقر؟ شيء من هذا القبيل:

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

الطريقة رقم 1: استخدام بدون سمة SRC

يمكننا إزالة سمة SRC لعلامة لإخفاء صورة. يمكننا بعد ذلك وضع ملف الصورة في سمة ، مثل Data-SRC أو شيء من هذا القبيل ، تمامًا مثل هذا:

افتراضيًا ، ستعرض معظم المتصفحات أيقونة صورة مكسورة ربما تكون على دراية بها:

حسنًا ، لذلك يمكن الوصول إليه. اعتقد؟ يمكنك رؤية علامة ALT التي يتم تقديمها على الشاشة تلقائيًا ، ولكن مع اندفاعة الضوء من JavaScript ، يمكننا بعد ذلك تبديل SRC بهذه السمة:

document.querySelectorAll("img").forEach((item) => {
  item.addEventListener("click", (event) => {
    const image = event.target.getAttribute("data-src");
    event.target.setAttribute("src", image);
  });
});

الآن يمكننا إضافة بعض الأنماط واف ، أوه لا:

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

كما قلت: ugh . لا أعتقد أن هناك طريقة لجعل هذه الطريقة تعمل (على الرغم من أنه من فضلك تثبت لي خطأ!).

الطريقة #2: استخدام الروابط لإنشاء صورة

الخيار الآخر الذي لدينا هو البدء بالارتباط التشعبي المتواضع ، مثل هذا:

Photograph of hot air balloons by Musab Al Rawahi. 144kb

والتي ، نعم ، لا شيء ذكي يحدث بعد - هذا سيعرض فقط رابطًا إلى صورة:

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

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

document.querySelectorAll(".load-image").forEach((item) => {
  item.addEventListener("click", (event) => {
    const href = event.target.getAttribute("href");
    const newImage = document.createElement("img");
    event.preventDefault();
    newImage.setAttribute("src", href);
    document.body.insertBefore(newImage, event.target);
    event.target.remove();
  });
});

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

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

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