Question

我有一个Widget，可以从远程数据库中获取内容。通常它的加载速度比页面慢。最初，在加载时，它的轮廓小于它最终的结果。由于页面呈现的原因，它会导致问题。

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

我不是100％肯定我可以在这里发布的例子或尝试。但如果需要，我可以深入了解当前的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区域的占位符

1 个答案: