gpt4 book ai didi

javascript - 使用 data html 属性加载不同的内容

转载 作者:行者123 更新时间:2023-12-03 06:08:49 26 4
gpt4 key购买 nike

有谁知道是否可能以及如何使用 html data 属性根据移动设备或桌面加载不同的内容?我在 gif 元素上设置了 data-gif 标签,在 video 元素上设置了 data-video 标签。

据我了解,可以根据屏幕尺寸加载不同的内容,但无法实现这一点。我不想只根据屏幕尺寸隐藏元素,但我根本不想加载它们。

请参阅下面我的代码。我尝试了很多方法来实现上面描述的内容,但没有成功。

目前这是我的代码:

<div id="main>
<div class="box-one>
<img data-gif='http://static1.squarespace.com/static/552a5cc4e4b059a56a050501/565f6b57e4b0d9b44ab87107/566024f5e4b0354e5b79dd24/1449141991793/NYCGifathon12.gif'>
<video data-video width="640" height="360" controls="" autoplay=""><source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"><source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm"><source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg"></video>';
</div>

<div class="box-two>
<img data-gif='http://static1.squarespace.com/static/552a5cc4e4b059a56a050501/565f6b57e4b0d9b44ab87107/566024f5e4b0354e5b79dd24/1449141991793/NYCGifathon12.gif'>
<video data-video width="640" height="360" controls="" autoplay=""><source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"><source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm"><source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg"></video>';
</div>
</div>

JAVASCRIPT

(function(){

var windowWidth = $(window).width();
var maxDeviceWidth = 768;

if (windowWidth > maxDeviceWidth) {
//show video
} else {
//show gif
}

})();

最佳答案

加载和显示内容是两件不同的事情。如果内容在 DOM 中,它将被加载。然后您可以使用 CSS 显示/隐藏内容。

.box-one{
display: none;
}
.box-two{
display: block;
}
@media screen and (max-width: 768px){
.box-one{
display: block;
}
.box-two{
display: none;
}
}

如果您只想将必要的内容加载到 DOM,则需要使用 JavaScript 测试屏幕尺寸,然后使用 Ajax 提取内容,或者将其硬编码到 JavaScript 中。

var windowWidth = $(window).width();
var maxDeviceWidth = 768;
if (windowWidth > maxDeviceWidth) {
//Server the desktop version
//You can get the content with Ajax or load both and hide the other
} else {
//Load the mobile content - either with Ajax, or hide the desktop content
}

关于javascript - 使用 data html 属性加载不同的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39409014/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com