ตัวยึดตำแหน่งสำหรับพื้นที่วิกเก็ตในขณะที่กำลังโหลดเนื้อหา

ฉันมีวิดเจ็ตที่ดึงเนื้อหาจากฐานข้อมูลระยะไกล บ่อยครั้งโหลดช้ากว่าหน้าเว็บ ในตอนแรก ขณะที่มันกำลังโหลด มันจะมีโปรไฟล์ที่เล็กกว่าที่มันจะจบลงในที่สุด มันทำให้เกิดปัญหาด้วยเหตุผลหลายประการที่เกี่ยวข้องกับการแสดงเพจ

วิดเจ็ตจะโหลดปกอัลบั้มบางส่วน มีวิธีการโหลด 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
จริงๆ แล้ว ฉันพบว่าตำแหน่งนั้นใช้ได้โดยไม่ต้องระบุรูปภาพ (line... background-image: url("http://placehold.it/150x150");) แม้ว่าผมอยากจะมีภาพถ้าเป็นไปได้ก็ตาม บางทีโฮสต์เองจะดีกว่า - person square_eyes; 18.03.2015