如何使用jquery将css逐行添加到多个div中

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 + ')');    
});

Answer 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();
            });
        });
    });
});