Packey图像网格只有在CSS中定义背景图像时才起作用，而不是通过Javascript.Await/Semaphore

Packery image grid works only when background image is defined in CSS, but not through Javascript. Await/Semaphore?

本文关键字：图像 Javascript Semaphore Await 起作用 网格 CSS 背景 定义 Packey      更新时间：2023-09-26

我有一个packery图像网格，当在CSS文件中设置.item内容的背景图像时，它可以工作并响应：http://codepen.io/anon/pen/eJdapq

.item-content {
  width:  100%;
  height: 100%;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg);
  border: 4px solid #333;
  border-color: hsla(0, 0%, 100%, 0.4);
  -webkit-transition: width 0.4s, height 0.4s;
     -moz-transition: width 0.4s, height 0.4s;
       -o-transition: width 0.4s, height 0.4s;
          transition: width 0.4s, height 0.4s;
}

但是，如果我删除了硬编码的HTML元素：

 <div class="packery" id="packery">
 </div>

并尝试在页面加载时通过javascript/jquery将这些项动态添加到网格中：

$(document).ready(function () {
             //this block of code below gets executed for around 25 unique image urls 
            //so eventually 25 images would be added to the grid when the page loads

            var imageSourceUrl = //someURL 
            var listingEntry = document.createElement("div");
            listingEntry.className = "item";
            var image = document.createElement("div");
            image.className = "item-content";
            image.style.backgroundImage = "url(" + imageSourceUrl + ")";
            listingEntry.appendChild(image);
            var grid = document.getElementById("packery");
            grid.appendChild(listingEntry);

 }

这只是将它们添加到左侧的页面中，而不是网格中。有什么想法吗？

经过进一步研究，当我添加更多的硬编码DOM项而不是通过javascript添加的图像时，当网格足够大时，就会完全覆盖图像。我怀疑在将图像添加到dom之前正在初始化packery。

我怎么能让packery等到我初始化所有HTML元素？

问题是在动态添加所有HTML元素之前，packery正在初始化网格。解决方案是在之后简单地初始化它。

相关文章：