CSS显示：没有更好的解决方案？

I am using DIVI, Wordpress and I have this video I set as a background for Desktop but I disable it for Mobile and Tablets but here's the thing, what the Disable option does is just a display:none so the video is still being loaded DOM.

我正在使用DIVI,Wordpress和我有这个视频我设置为桌面的背景但我禁用它为移动和平板电脑,但这是事情,什么禁用选项只是一个显示:无,所以视频仍在加载DOM 。

Is there a way to totally block an object from loading? so it does affect the loading time on mobile devices?

有没有办法完全阻止加载对象?这会影响移动设备的加载时间吗?

Share your thoughts, Please

分享你的想法,拜托

2 个解决方案

#1

Yes, flip your logic:

是的,翻转你的逻辑:

Never load the clip, unless it's a capable device.

切勿装入夹子,除非它是一个有能力的设备。

You can use javascript to check if the screen width is broad enough (or even better: Check if the device is capable of your clip, some tablets in a wifi can often display it as well).
If you decide it can be played, add a video element to the page (or add the src to your element) and trigger a play event.

您可以使用javascript检查屏幕宽度是否足够宽(甚至更好:检查设备是否具有剪辑功能,wifi中的某些平板电脑也可以经常显示它)。如果您决定可以播放,请向页面添加视频元素(或将src添加到元素中)并触发播放事件。

BTW: This trick can be applied to many resources, eg images as well.

BTW:这个技巧可以应用于许多资源,例如图像。

#2

Based on the suggestions Ian kindly made, here is my working solution.

根据Ian友好提出的建议,这是我的工作解决方案。

Firstly, I changed each video's child source elements to have an attribute data-src like so:

首先,我将每个视频的子源元素更改为具有如下属性data-src:

<video id="my-id">    
   <source data-src="somevideo.mp4">
</video>

Then, after performing a mobile check using the script available at http://detectmobilebrowsers.com/ which I modified to include iPads etc (related SO answer here) I simply used the following script to automatically update the src attribute of each video (if we're on desktop in my case):

然后,在使用http://detectmobilebrowsers.com/上提供的脚本执行移动检查后,我修改了该脚本以包含iPad等(此处有相关的答案)我只是使用以下脚本自动更新每个视频的src属性(如果在我的情况下我们在桌面上):

var sources = document.querySelectorAll('video#my-id source');
// Define the video object this source is contained inside
var video = document.querySelector('video#my-id');
for(var i = 0; i<sources.length;i++) {
  sources[i].setAttribute('src', sources[i].getAttribute('data-src'));
}
// If for some reason we do want to load the video after, for desktop as opposed to mobile (I'd imagine), use videojs API to load
video.load();

And that's it! Nothing loads on mobile devices anymore and I can have fairly granular control over the devices it will or won't load on.

就是这样!移动设备上没有任何东西加载,我可以对它将加载或不加载的设备进行相当精细的控制。

Hope this helps somebody.

希望这有助于某人。

#1