Write a js function that will upload pictures to olx.

It is necessary to create a chrome extension for olx.ua that will make viewing ads more convenient.

The task has 2 points.

Point 1.

For my extension screen (full hd), it sets the width of the blocks to 1200px, which is too much because the title of the ad is very far from the price,

it is necessary to reduce the block size to 950px and make the font size of the price a little larger - 20px.

Point 2.

The main "problem" (inconvenience for me).

The olx site loads the main photo of the ads dynamically. The image loads only when the block with the ad comes into focus.

As a result, these images flicker in front of my eyes. This really annoys me.

Sometimes there are tasks where I need to view thousands of ads, and it turns into a nightmare.

It is necessary for the images to load all at once.

I like how it is done in autoria,

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

for example, I open a page with 100 ads, and all these photos load instantly, the viewing is fast and convenient.

I want it to be the same in olx. (in the old olx it was like that until those devils changed the design).

I already have a plugin where point 1 has already been done by our admin, I will provide the code below. But I need help with how to implement point 2.

There were three ideas

1) through the variable window.__PRERENDERED_STATE__, but this option will not work because when I change something in the filters, the data will be different and the URLs of the new images cannot be retrieved through it

2) set the page zoom to 10%, document.body.style.zoom = 0.10;

(all images will load at once because they come into focus, then after 100 milliseconds return the zoom back)

this method works, but I don't like that the page "jumps", it is uncomfortable.

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

take the ad id (903467809) and send requests to their api https://www.olx.ua/api/v2/offers/903467809/

and take the image URLs from data->photos->link

But I think this method is overly complicated.

4) your idea. Maybe there is some .focus() that needs to be sent to load all the images.

I will choose the performer from Monday, do not rush, take a look, see if this can be done or not. Then write back.

I do not understand if this is an easy task or a difficult one)

___________________________________________________________

// current URL

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

// pages that have ads

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-dlya-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'];

// check if the current URL is a page with ads

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

console.log('the current URL is a page with ads ',curr_location_Includes_search_results, curr_location);

var ad_element='[data-cy="l-card"]'; // ad

var ad_price='[data-testid="ad-price"]'; // ad price

function changeElementStyle(className) {

    console.log('start changing style');

    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() {

        // here you need to write the code

        console.log('hello');

}

if (curr_location_Includes_search_results)

{

    setTimeout(changeElementStyle, 2000, ad_element);

    setTimeout(changeElementStyle, 2000, ad_price);

    setTimeout(load_all_olx_images, 5000);

}