- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我编写了一个小灯箱,用于在我的网站上查看图片。为了保持快速加载过程,我想“延迟加载”全尺寸图像。目前浏览器始终加载预览 (test.jpg?size=520px) 和全尺寸图像 (test.jpg)。
是否有任何简单的解决方案来防止浏览器在单击图像之前加载全尺寸图像?
<picture>
标记 ( <picture>
<<>> <picture-disabled>
) 并预取全尺寸图像?HTML:
<div class="imagecc">
<picture onclick="lightboxshow('test004.jpg')">
<source type="image/webp" srcset="test004.webp?size=520px">
<img src="test.jpg?size=520px" alt="...">
</picture>
<p class="imgcaption">...</p>
</div>
<div id="test004.jpg" class="imageccbox" onclick="lightboxclose(this)">
<div class="imageccboxpicture">
<picture>
<source type="image/webp" srcset="test004.webp">
<img src="test.jpg">
</picture>
</div>
</div>
CSS:
.imageccbox {
display: none;
position: fixed;
z-index: 9999;
top: 0; left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,1));
text-align: center;}
.imageccbox:target {
background: rgba(255,255,255,0.8);
display: block;
outline: none;}
.imageccbox:target > .imageccboxpicture {opacity: 1.0;}
.imageccboxpicture {
margin-top: 5%;
opacity: 0.4;
transition: opacity 500ms linear;
cursor: none;}
JavaScript:
function lightboxshow(object) {
var imageccbox = document.getElementById(object);
imageccbox.style.display='block';
setTimeout(function() {imageccbox.getElementsByClassName("imageccboxpicture")[0].style.opacity = 1.0;}, 25);
window.location.hash = object;}
最佳答案
考虑使用 <template>
element .它只是网络组件的一部分。
基本上,您可以在 <template>
中填充任何内容您不希望浏览器加载的内容,然后在您希望加载内容时移动内容。你做出那个改变onload
, 或 onclick
,或您喜欢的任何其他事件。无论哪种方式,都不需要大量的 JavaScript 操作,而且您不需要任何库。
看看这个教程:Quick trick: using template to delay loading of images .
不支持该标签的旧版浏览器将无法获得延迟加载的好处,因此也有不错的渐进式增强功能。
另一个引用:http://webcomponents.org/articles/introduction-to-template-element/
关于javascript - HTML 5 的 <picture> 延迟加载(没有 jquery),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37501421/
我想创建一个(最好)HTML 代码,将内容从另一个小页面加载到当前网站。小页面的内容是一组带有动态变化的图像的 anchor (因此将它们编码到要显示它们的页面中是不切实际的)。这样的功能是否可以在纯
这个问题在这里已经有了答案: What does a space mean in a CSS selector? i.e. What is the difference between .clas
我正在尝试在网站上放置响应图像。我有以下代码 图片元素的大小将由包含的 div 决定。 包含的 div 的大小将是随机的。可以直接放在.container里,也可以放在.col-sm-
我正在使用 Opentok.js,我想以画中 Canvas 局显示订阅者和发布者。当我调整窗口大小时,它应该具有响应性并保持比例,以及如何以全屏方式获取视频,即使视频是“320x240”吗? 最佳答案
html 元素 video有一个名为 disablePictureInPicture 的属性虽然它似乎只适用于 chrome,但它工作得很好。 由于我只能找到有关此问题的旧帖子,这些帖子最终没有解决或
我正在尝试在我的应用中支持分屏功能。 目前目标SDK是27 defaultConfig { applicationId "com.myvestige.vestigedeal"
编辑:本文末尾的 Anwser。 借助内置的 Facebook SDK 函数 Request(),我正在尝试获取 Facebook 用户的头像。 我正在使用 /me/picture 调用来获取个人资料
错误消息 java.lang.IllegalStateException: enterPictureInPictureMode: Current activity does not support p
我可以使用 jquery(或 javascript)强制 html5 video 播放器以画中画 模式播放吗?(下图) . 这是我使用 jquery 3.3.1(由 Google 托管)的个人网站。现
假设文本 = T,图像 = M 桌面订单: M T 需要手机下单: T M 我需要桌面和移动设备上的响应行为。 .container{width:100%;} #image {width:50%;}
使用相机 API 拍照后,这张照片会显示在屏幕/此 Activity 上。我想将这张覆盖整个屏幕的图片发送到另一个名为 PictureEditor 的 Activity 。在那里我将添加可以编辑图片的
我使用 YouTube iframe js API 在 Firefox 中收到此警告 如何处理? 最佳答案 YouTube API 正在向浏览器发送调用,但浏览器响应说“我不支持”,然后在控制台中让您
我正在使用 标签。我的目标群体使用现代浏览器,所以尽快 Firefox supports WebP没有必要使用标签。 现在: 很快: 有没有办法实现 alt
Hello Together 遵循我的代码: public class SampleData : DropCreateDatabaseIfModelChanges { protecte
我在为主 设置正确的宽度和高度时遇到问题img src 块内。 如果我把它留给 宽度="100%"高度="100%"视觉上还可以,但 Google 搜索 PageSpeed
我正在尝试使图片元素工作,但它不会加载后备 img Locat
打印下面的图片时遇到一些问题。 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 (16 times) 2 2 2 2 2 2 2 2 2 2 2 2
我想不通为什么我的 img 在 picture 标签中不想显示?有任何想法吗? 谢谢! 最佳答案 你的图片路径有误。看我的例子
我有一种情况需要将 CSS 文件中的图像提供给 goJs go.picture 方法。不是来自交叉起源。如何通过。 GO(go.Picture, {source: 'images/sample.png
我需要一些帮助来理解为什么有人会在网页中加载这样的图像?我的意思是最后的两个标签和标签。 如何决定加载哪个图像? 背后有框架吗? 这是否意味着它加载两个图像并以不同的分辨率在它们之间切换?
我是一名优秀的程序员,十分优秀!