加载内容时 wiget 区域的占位符

Question

我有一个从远程数据库获取内容的小部件。通常它加载速度比页面慢。最初，在加载时，它的配置文件比最终的配置文件小。由于与页面呈现有关的多种原因，它会导致问题。

Widget 加载了一些专辑封面。是否有可能加载占位符 jpeg 的方法，以便小部件在视觉上具有连续性，而且在实际内容到达时页面加载时不会改变大小和布局？

我不是 100% 确定我可以post 在这里作为示例或尝试。但如果需要，我可以深入了解当前的 Wordpress 插件。

示例 here - 在页面加载时上下滚动并在左侧边栏中查看专辑封面加载。

我的尝试...

/* IMAGE PLACEHOLDER */

#samsonginfo_widget_li_djart::-webkit-input-placeholder {
  color: transparent;
  text-indent: -9999px;
  background-image: url("http://placehold.it/150x150");
  background-position: 0 50%;
  background-repeat: no-repeat; 
}
#samsonginfo_widget_li_djart::-moz-placeholder {
  /* Firefox 19+ */
  color: transparent;
  text-indent: -9999px;
  background-image: url("http://placehold.it/150x150");
  background-position: 0 50%;
  background-repeat: no-repeat; 
}
#samsonginfo_widget_li_djart:-moz-placeholder {
  /* Firefox 18- */
  color: transparent;
  text-indent: -9999px;
  background-image: url("http://placehold.it/150x150");
  background-position: 0 50%;
  background-repeat: no-repeat; 
}
#samsonginfo_widget_li_djart:-ms-input-placeholder {
  /* IE 10- */
  color: transparent;
  text-indent: -9999px;
  background-image: url("http://placehold.it/150x150");
  background-position: 0 50%;
  background-repeat: no-repeat;

Answer 1

好的，这是答案：

.samsonginfo_widget {
     min-height:265px;
     background-image: url("http://placehold.it/150x150");
     background-position: left bottom;
     background-repeat: no-repeat; 
}
.samsonginfo_widget ul {
     background:#fff;
}

加载内容时 wiget 区域的占位符

Placeholder for wiget area while content is loading

php

wordpress

widget