تحميل كسول للخرائط

إذا كانت الصفحة تحتوي على خريطة Yandex أو خريطة Google تفاعلية ، فقد يستغرق الأمر بضع ثوانٍ في سرعة التحميل ، ومن الرائع إفساد تقرير Google PageSpeed .



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



1. أولاً ، دعنا نبني خريطة Yandex ( هنا ) ونحصل على نص ، شيء مثل هذا:

<script type="text/javascript" 
        charset="utf-8" 
        async 
        src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A1ad4887964fc2e0a6f07c6246ffe638b138f8baacc8983f9a6a0f401a02e833a&width=1280&height=400&lang=ru_RU&scroll=true"></script>

2. في موقعنا ، سنقوم بكتابة حاوية لكتلة البطاقة:

<div id="map_container" class="map container-fluid">
<script id="ymap_lazy"
        async
        data-src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A1ad4887964fc2e0a6f07c6246ffe638b138f8baacc8983f9a6a0f401a02e833a&width=1280&height=400&lang=ru_RU&scroll=true"></script>
</div>

وأنماط صورتنا الثابتة (من الأسهل القيام بذلك باستخدام أي لقطات شاشة):

<style>
    .map.container-fluid {
        height: 340px;
        padding: 0;
        background-image: url(/uploads/common/ymap0.png);
        background-position: center center;
    }
</style>

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

<script>
    let map_container = document.getElementById('map_container');
    let options_map = {
        once: true,//  ,    
        passive: true,
        capture: true
    };
    map_container.addEventListener('click', start_lazy_map, options_map);
    map_container.addEventListener('mouseover', start_lazy_map, options_map);
    map_container.addEventListener('touchstart', start_lazy_map, options_map);
    map_container.addEventListener('touchmove', start_lazy_map, options_map);

    let map_loaded = false;
    function start_lazy_map() {
        if (!map_loaded) {
            let map_block = document.getElementById('ymap_lazy');
            map_loaded = true;
            map_block.setAttribute('src', map_block.getAttribute('data-src'));
            map_block.removeAttribute('data_src');
            console.log('YMAP LOADED');
        }
    }
</script>

4. الربح! الآن يتم تحميل موقعك بشكل أسرع!



ملاحظة: يمكن أيضًا تكييف هذه الطريقة مع الكائنات الأخرى التي لا تتطلب JS و CSS ، نظرًا لأن سرعة تحميل الصفحة يمكن أن تكون أقل من ثانية.