Placeholder untuk area wiget saat konten sedang dimuat

Saya memiliki Widget yang mengambil konten dari database jarak jauh. Seringkali memuat lebih lambat daripada halaman. Awalnya, saat sedang dimuat, profilnya lebih kecil daripada profil akhirnya. Ini menyebabkan masalah karena sejumlah alasan yang berkaitan dengan rendering halaman.

Widget memuat beberapa sampul album. Apakah ada metode untuk memuat jpeg placeholder, sehingga secara visual widget memiliki kontinuitas, tetapi halaman juga dimuat tanpa perubahan ukuran dan tata letak saat konten sebenarnya tiba?

Saya tidak 100% yakin dengan apa yang bisa saya posting di sini sebagai contoh atau upaya. Tapi saya bisa menggali plugin Wordpress saat ini jika diperlukan.

Contoh di sini - Gulir ke atas dan ke bawah saat halaman dimuat dan lihat sampul album dimuat di sidebar kiri .

Upaya saya...

/* 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 sumber
comment
Maaf lupa linknya. Lihat hasil edit saya :)   -  person square_eyes    schedule 18.03.2015
comment
Hmm rumit tanpa mengetahui nama widget yang Anda gunakan, saya hanya akan menggunakan aturan CSS min-height untuk menata area widget dan memberinya gambar latar belakang placeholder   -  person Rich    schedule 18.03.2015
comment
Ini adalah Widget khusus, dan pengembang telah meninggalkan gedung! Tapi kedengarannya bagus. Saya bisa melakukan itu. Apa sintaks untuk yang terakhir? Saya akan mencobanya.   -  person square_eyes    schedule 18.03.2015
comment
Oke, saya menambahkan upaya saya, itu tidak mendasar bagi saya. Semoga Anda dapat membantu.   -  person square_eyes    schedule 18.03.2015

Jawaban (1)


arrow_upward
1
arrow_downward

Oke inilah jawabannya:

.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
Sebenarnya ini berhasil! Anda dapat melihatnya sekarang di tautan. Terima kasih telah membantu dengan pertanyaan yang tidak jelas. Adakah ide seputar cara menangani judul dan teks? - person square_eyes; 18.03.2015
comment
Gambar placeholder dimuat saat sisanya sedang dimuat, namun ada ruang di bawah judul Siaran, dan teks di bawah sampul album tidak memiliki placeholder, yang berarti konten akan diubah ukurannya setelah dimuat. - person square_eyes; 18.03.2015
comment
Ubah saja ketinggian minimum dan posisi latar belakang placeholder hingga tepat untuk Anda. Semoga beruntung - person Rich; 18.03.2015
comment
Sebenarnya menurut saya penempatannya baik-baik saja tanpa menentukan gambarnya. (baris... background-image: url("http://placehold.it/150x150");) Meskipun saya ingin memiliki gambarnya jika memungkinkan. Mungkin yang dihosting sendiri akan lebih baik. - person square_eyes; 18.03.2015