จากคำตอบของ@Westonฉันได้สร้างโซลูชัน jQuery ทั่วไปมากขึ้นโดยพื้นฐานแล้วคุณสามารถคัดลอกและวาง JS และ CSS และมุ่งเน้นไปที่ส่วน HTML;)
CSS
... เพื่อให้แน่ใจว่าภาพจะมองไม่เห็นในขณะโหลด
.srcSet{
position: fixed;
z-index: 0;
z-index: -1;
z-index: -100;
}
JS / jQuery
สคริปต์นี้จะส่งผ่านรูปภาพทั้งหมดที่มีsrcSet
คลาสและload
เหตุการณ์การโยงที่ใช้เวลาcurrentSrc
(หรือsrc
หากไม่รองรับ) และวางเป็นbackground-image
CSS ให้กับพาเรนต์ที่ใกล้เคียงที่สุดกับbgFromSrcSet
คลาส
แค่นั้นเองคงไม่พอ! ดังนั้นมันยังทำให้ตัวตรวจสอบช่วงเวลาในwindow
load
เหตุการณ์เพื่อทดสอบว่าเหตุการณ์การโหลดเสร็จสมบูรณ์หรือไม่หากไม่เป็นเช่นนั้นมันจะทริกเกอร์เหตุการณ์เหล่านั้น (img
load
เหตุการณ์มากมักจะเรียกเฉพาะในการโหลดครั้งแรกเมื่อวันที่ต่อไปนี้โหลดที่มาของภาพอาจจะดึงมาจากแคชที่เกิดขึ้นในเหตุการณ์ img โหลดไม่ถูกไล่ออก! )
jQuery(function($){
var $window = $(window);
var $srcSets = $('.srcSet');
$srcSets.each(function(){
var $currImg = $(this);
$currImg
.load(function(){
var img = $currImg.get(0);
var src = img.currentSrc ? img.currentSrc : img.src;
$currImg.closest('.bgFromSrcSet').css('background-image', "url('"+src+"')");
$srcSets = $srcSets.not($currImg);
$currImg.remove();
})
;
});
$window.load(function(){
var loadChecker = setInterval(function(){
if( $srcSets.length > 0 )
$srcSets.load();
else
clearInterval(loadChecker);
}, 150);
});
});
HTML
... อาจมีลักษณะดังนี้:
<div class="bgFromSrcSet">
<img class="srcSet"
alt=""
src="http://example.com/something.jpeg"
srcset="http://example.com/something.jpeg 5760w, http://example.com/something-300x200.jpeg 300w, http://example.com/something-768x512.jpeg 768w, http://example.com/something-1024x683.jpeg 1024w, http://example.com/something-1000x667.jpeg 1000w"
sizes="(max-width: 2000px) 100vw, 2000px"
>
Something else...
</div>
หมายเหตุ:ชั้นเรียนbgFromSrcSet
จะต้องไม่ถูกตั้งค่าเป็นimg
ตัวเอง! สามารถตั้งค่าเป็นองค์ประกอบในimg
แผนผังแม่ของ DOM เท่านั้น