Question

在执行功能之前，我在显示加载图标时遇到了一些问题。它似乎同时显示我的新元素被附加到DOM。我希望有很多元素，因此在构建这些新元素时需要加载图标。

我想要发生的事情的细分

显示加载图标
构建新元素并附加到DOM
隐藏加载图标

生成虚拟元素

<div class="loader"></div>
<button>Duplicate Items</button>

<section class="grid">
    <?php for ($i = 0; $i < 1000; $i++) :
        $randH = rand(1, 10);
        $randW = rand(1, 10);
        $imgUrl = 'http://placehold.it/' . $randH . 'x' . $randW;
    ?>
        <article class="grid__item">
            <img src="<?php echo $imgUrl; ?>" height="<?php echo $randH; ?>" width="<?php echo $randW; ?>">
            <p>Hello <?php echo $i; ?></p>
        </article>
    <?php endfor;?>
</section>

<section class="gallery></section>

Javascript函数

let createGallery = () => {
    let gridItems = document.querySelectorAll('.grid__item'),
        gallery = document.querySelector('.gallery'),
        gridArray = Array.prototype.slice.call(gridItems, 0);

    // create new elements
    gridArray.forEach((item, index) => {
        let galleryItem = document.createElement('article'),
            img = item.querySelector('img').attributes,
            markup = {
                caption: item.querySelector('p').innerHTML
            },
            template = `<article class="gallery__item">
                            <img class="gallery__item__img" src="{{src}}" height="{{height}}" width="{{width}}">
                            <figcaption>{{caption}}</figcaption>
                        </article>`;

        for (let i = 0; i < img.length; i++) {
            markup[img[i].nodeName] = img[i].nodeValue;
        }

        Object.keys(markup).forEach(function(key) {
            let regEx = new RegExp('\{\{' + key + '\}\}', 'g');
            template = template.replace(regEx, markup[key]);
        });

        galleryItem.innerHTML = template;
        galleryItem.className = 'gallery__item ' + index;
        gallery.appendChild(galleryItem);
    })

    // after all images have been added > hide loader
    $('.loader').removeClass('is-active');
};

let initGallery = () => {
    // show loader, before creating gallery
    $('.loader').addClass('is-active');

    // create new elements
    createGallery();
}

let $button = document.querySelector('button');
$button.addEventListener('click', initGallery);

函数在.forEach之前没有执行

0 个答案: