Napisz funkcję js, która będzie przesyłać zdjęcia na olx

Trzeba zrobić rozszerzenie chrome dla olx.ua, które uczyni przeglądanie ogłoszeń bardziej wygodnym.

Zadanie ma 2 punkty.

punkt 1.

Dla mojego rozszerzenia ekranu (full hd) ustawia szerokość bloków na 1200px, co jest za dużo, ponieważ tytuł ogłoszenia znajduje się bardzo daleko od ceny,

trzeba zmniejszyć rozmiar bloku do 950px i zrobić czcionkę ceny trochę większą - 20px.

punkt 2.

główna "problem" (niewygodność dla mnie).

Strona olx ładuje główne zdjęcie ogłoszeń dynamicznie. Obrazek ładuje się tylko wtedy, gdy blok z ogłoszeniem trafia w fokus.

W rezultacie te obrazki migają mi przed oczami. Bardzo mnie to irytuje.

Czasami zdarzają się sytuacje, że trzeba przejrzeć tysiące ogłoszeń, i to zamienia się w koszmar.

Trzeba, aby obrazki ładowały się wszystkie i od razu.

Podoba mi się, jak to zrobiono w autoria,

https://auto.ria.com/uk/search/?indexName=auto&categories.main.id=1&brand.id[0]=6&model.id[0]=43&size=100

na przykład, otwieram stronę, na której jest 100 ogłoszeń, i wszystkie te zdjęcia ładują się natychmiast, przeglądanie jest szybkie i wygodne.

Chcę, aby tak było i w olx. (w starym olx tak było, dopóki ci diabli nie zmienili designu).

Już mam wtyczkę, gdzie punkt 1 został już zrobiony przez naszego admina, poniżej dam kod. A jak zrobić punkt 2 - potrzebuję pomocy.

Były trzy pomysły

1) przez zmienną window.__PRERENDERED_STATE__, ale ta opcja nie pasuje, ponieważ gdy będę coś zmieniać w filtrach, dane będą inne i URL nowych obrazków przez nią już nie da się zdobyć

2) ustawić skalę strony na 10%, document.body.style.zoom = 0.10;

(wszystkie obrazki załadują się od razu, ponieważ znalazły się w fokusie, potem po 100 milisekundach przywrócić skalę z powrotem)

działająca metoda, wszystko działa, ale nie podoba mi się, że strona "szarpie", to nie jest komfortowe.

3) z bloku <div data-cy="l-card" data-testid="l-card" data-visually-ready-trigger-element="true" id="903467809" >

brać id ogłoszenia (903467809) i wysyłać zapytania do ich api https://www.olx.ua/api/v2/offers/903467809/

i z niego brać url obrazków data->photos->link

Ale wydaje mi się, że ten sposób jest zbyt skomplikowany.

4) twój pomysł. Może trzeba im wysłać jakieś .focus() i wszystkie obrazki się załadują.

Wykonawcę wybiorę od poniedziałku, nie spieszcie się, zobaczcie, czy można to zrobić, czy nie. Potem napiszcie.

Nie rozumiem, czy to łatwe zadanie, czy trudne)

___________________________________________________________

// aktualny URL

var curr_location=window.location.href.replace('/ru/','/').replace('/uk/','/').replace('/d/','/');

// strony, na których są ogłoszenia

var search_results_pages = ['olx.ua/home','olx.ua/list','olx.ua/dopomoga','olx.ua/detskiy-mir','olx.ua/nedvizhimost','olx.ua/transport','olx.ua/zapchasti-dla-transporta','olx.ua/rabota','olx.ua/zhivotnye','olx.ua/dom-i-sad','olx.ua/elektronika','olx.ua/uslugi','olx.ua/zhytlo-podobovo','olx.ua/arenda-prokat','olx.ua/moda-i-stil','olx.ua/hobbi-otdyh-i-sport','olx.ua/otdam-darom','olx.ua/obmen-barter'];

// sprawdzić, czy aktualny URL to strona z ogłoszeniami

var curr_location_Includes_search_results = search_results_pages.some(page => curr_location.includes(page));

console.log('aktualny URL to strona z ogłoszeniami ',curr_location_Includes_search_results, curr_location);

var ad_element='[data-cy="l-card"]'; // ogłoszenie

var ad_price='[data-testid="ad-price"]'; // cena ogłoszenia

function changeElementStyle(className) {

    console.log('początek zmiany stylu');

    var elems = document.querySelectorAll(className);

    var index = 0, length = elems.length;

    for ( ; index < length; index++)

    {

        if (className.includes('price')) elems[index].style.fontSize='18px';

        if (className.includes('l-card')) elems[index].style.width='950px'; // 1200 - 250, hull hd

    }

}

function load_all_olx_images() {

        // tutaj trzeba napisać kod

        console.log('cześć');

}

if (curr_location_Includes_search_results)

{

    setTimeout(changeElementStyle, 2000, ad_element);

    setTimeout(changeElementStyle, 2000, ad_price);

    setTimeout(load_all_olx_images, 5000);

}