أحاول استخدامه .prop('currentSrc')
للحصول على srcset الحالي (يعتمد على حجم المتصفح) للصورة التي يتم عرضها.
ومع ذلك ، لا يبدو Jquery قادرًا على الحصول على قيمة srcset من html <picture>
العنصر في الرمز أدناه. تستمر قيمة newBackground في العودة غير محددة.
هل يمكن لـ jquery استخدام .prop ('currentSrc') للحصول على srcset المستخدم حاليًا من عنصر الصورة؟ إذا لم يكن كذلك ، فهل هناك طريقة أفضل؟
var photos = $("picture").toArray();
window.setInterval(changePhoto, 6000);
function changePhoto() {
photos.push(photos.shift());
var newBackground = photos[0];
console.log(newBackground); // logs <picture> element
newBackground = $(newBackground).prop('currentSrc');
console.log(newBackground); // logs undefined
$(".banner").css("background-image", "url(" + newBackground + ")");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<picture>
<source media="(min-width: 901px)" srcset="oldmanfull.jpg">
<source media="( (min-width : 515px) and (max-width : 900px) )" srcset="oldmantablet.jpg">
<img src="oldmantablet.jpg" />
</picture>
<picture>
<source media="(min-width: 901px)" srcset="hatman.jpg">
<source media="( (min-width : 515px) and (max-width : 900px) )" srcset="hatmantablet.jpg">
<img src="hatmantablet.jpg" />
</picture>