how to add css to multiple divs in a row and one after another with jquery

Question

I am adding css background to multiple divs and I want to do it in a row and one after another. Now that I add css to all divs, it adds all the background-images to all divs at once which makes the images to load slowly.

this is my jquery code :

$('#m-portfolio .slick-slide').each(function(){
    var $item   = $(this),
        img     = $item.find('.m-p-view').attr('data-lazyload'),
        bg      = $item.find('.m-p-view').attr('data-bg');

    $item.find('div.slice').css('background-image', 'url(' + img + ')');
    $item.find('.m-p-view').css('background-image', 'url(' + bg + ')');    
});

Luca Filosofi · Accepted Answer · 2019-12-07 21:36:23Z

1

demo: https://so.lucafilosofi.com/how-to-add-css-to-multiple-divs-in-a-row-and-one-after-another-with-jquery/

$(function () {
    $('#m-portfolio .slick-slide').each(function (i, item) {
        var $item = $(this).hide(),
            $mpview = $item.find('.m-p-view'),
            $slice = $item.find('.slice'),
            img = $mpview.attr('data-lazyload'),
            bg = $mpview.attr('data-bg');
        $('<img src="' + img + '" />').load(function () {
            $slice.css('background-image', 'url(' + img + ')');
            $('<img src="' + bg + '" />').load(function () {
                $mpview.css('background-image', 'url(' + bg + ')').parent('.slick-slide').delay(i + '000').fadeIn();
            });
        });
    });
});

edited Dec 7, 2019 at 21:36

answered Sep 25, 2015 at 7:41

Luca Filosofi

31.2k9 gold badges72 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Afshin Over a year ago

what is div slice? Is a preview Image before the bigger one load? Not Exactly. Both of them are div backgrounds. One div is upper than another. When I click on the upper, it folds like a paper and the lower background shows up. Now, the problem is something else. I have got for example 10 elements like this with the same classes and because of that I used each and I dont want them to load at once together

Afshin Over a year ago

Thanks. Not exactly, but this is somehow what I need. I am going to work on it

Luca Filosofi Over a year ago

@Afshin Haghighat : with load() function you will sure that image is fully loaded before it display, so no flickering image will appear. then if you pre-set the .m-p-view to hidden, with the help of fadeIn() function you can make it display one after another at specified time using the i to increment each single item. This is because rendering of images is even faster then you can think, for this reason also if you load() all the images you will not see a real one-by-one effect that for istance you can achieve with fading effect.

Luca Filosofi Over a year ago

@Afshin Haghighat i have updated the code tu suit your need, try it and let me know.

Collectives™ on Stack Overflow

how to add css to multiple divs in a row and one after another with jquery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related