Заполнитель для области виджета во время загрузки контента

У меня есть виджет, который захватывает содержимое из удаленной базы данных. Довольно часто он загружается медленнее, чем страница. Первоначально, пока он загружается, он имеет меньший профиль, чем в конечном итоге. Это вызывает проблемы по ряду причин, связанных с рендерингом страницы.

Виджет загружает некоторые обложки альбомов. Есть ли способ, возможно, загрузить заполнитель jpeg, чтобы визуально виджет имел непрерывность, но при этом страница загружалась без изменений размера и макета, когда поступает реальный контент?

Я не уверен на 100% в том, что я могу опубликовать здесь в качестве примера или попытки. Но я могу покопаться в текущем плагине Wordpress, если это необходимо.

Пример здесь – прокрутите вверх и вниз во время загрузки страницы и увидите загрузку обложки альбома на левой боковой панели. .

Моя попытка...

/* 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;

wordpress widget php
person square_eyes    schedule 18.03.2015    source источник
comment
Извините забыл ссылку. Смотрите мою правку :)   -  person square_eyes    schedule 18.03.2015
comment
Хм, сложно, не зная имени виджета, который вы используете, я бы просто использовал правило CSS минимальной высоты, чтобы стилизовать область виджета и присвоить ему фоновое изображение-заполнитель.   -  person Rich    schedule 18.03.2015
comment
Это пользовательский виджет, и разработчик покинул здание! Но это звучит хорошо. Я могу это сделать. Каков синтаксис последнего? Я попробую.   -  person square_eyes    schedule 18.03.2015
comment
ОК, я добавил свою попытку, она не принципиальна для меня. Надеюсь, вы можете помочь.   -  person square_eyes    schedule 18.03.2015

Ответы (1)


arrow_upward
1
arrow_downward

Хорошо, вот ответ:

.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;
}
person Rich    schedule 18.03.2015
comment
На самом деле, это сработало! Посмотреть сейчас можно по ссылке. Спасибо за помощь в таком непонятном вопросе. Любые идеи о том, как обрабатывать заголовок и текст? - person square_eyes; 18.03.2015
comment
Изображение-заполнитель загружается во время загрузки остальных, но под заголовком «В эфире» есть пробел, а текст под обложкой альбома не имеет заполнителя, что означает, что размер содержимого изменяется после загрузки. - person square_eyes; 18.03.2015
comment
Просто измените минимальную высоту и фоновое положение заполнителя до тех пор, пока он вам не подойдет. Удачи - person Rich; 18.03.2015
comment
На самом деле, я считаю, что размещение в порядке без указания изображения. (строка... background-image: url("http://placehold.it/150x150");) Хотя хотелось бы картинку, если можно. Возможно, самообслуживание было бы лучше. - person square_eyes; 18.03.2015