加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度。
这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验。本文将分享三个不同的预加载技术,来增强网站的性能与可用性。
方法一:用css和JavaScript实现预加载
实现预加载图片有很多方法,包括使用css、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的解决方案,十分高效。
单纯使用CSS,可容易、高效地预加载图片,代码如下:
#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }
将这三个ID选择器应用到(X)html元素中,我们便可通过CSS的background属性将图片预加载到屏幕外的背景上。
只要这些图片的路径保持不变,当它们在Web页面的其他地方被调用时,浏览器就会在渲染过程中使用预加载(缓存)的图片。简单、高效,不需要任何JavaScript。
该方法虽然高效,但仍有改进余地。使用该法加载的图片会同页面的其他内容一起加载,增加了页面的整体加载时间。
为了解决这个问题,我们增加了一些JavaScript代码,来推迟预加载的时间,直到页面加载完毕。代码如下:
function preloader() {
if (document.getElementById) {
document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";
document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";
document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px";
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(preloader);
在该脚本的第一部分,我们获取使用类选择器的元素,并为其设置了background属性,以预加载不同的图片。
该脚本的第二部分,我们使用addLoadEvent()函数来延迟preloader()函数的加载时间,直到页面加载完毕。
如果JavaScript无法在用户的浏览器中正常运行,会发生什么?很简单,图片不会被预加载,当页面调用图片时,正常显示即可。
上述方法有时确实很高效,但我们逐渐发现它在实际实现过程中会耗费太多时间。相反,我更喜欢使用纯JavaScript来实现图片的预加载。
下面将提供两种这样的预加载方法,它们可以很漂亮地工作于所有现代浏览器之上。
JavaScript代码段1
只需简单编辑、加载所需要图片的路径与名称即可,很容易实现:
<div class="hidden">
<script type="text/javascript">
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
"http://domain.tld/gallery/image-001.jpg",
"http://domain.tld/gallery/image-002.jpg",
"http://domain.tld/gallery/image-003.jpg"
)
</script>
</div>
该方法尤其适用预加载大量的图片。我的画廊网站使用该技术,预加载图片数量达50多张。将该脚本应用到登录页面,只要用户输入登录帐号,大部分画廊图片将被预加载。
JavaScript代码段2
该方法与上面的方法类似,也可以预加载任意数量的图片。将下面的脚本添加入任何Web页中,根据程序指令进行编辑即可。
<div class="hidden">
<script type="text/javascript">
if (document.images) {
img1 = new Image();
img2 = new Image();
img3 = new Image();
img1.src = "http://domain.tld/path/to/image-001.gif";
img2.src = "http://domain.tld/path/to/image-002.gif";
img3.src = "http://domain.tld/path/to/image-003.gif";
}
</script>
</div>
正如所看见,每加载一个图片都需要创建一个变量,如“img1 = new Image();”,及图片源地址声明,如“img3.src = “../path/to/image-003.gif”;”。参考该模式,你可根据需要加载任意多的图片。
我们又对该方法进行了改进。将该脚本封装入一个函数中,并使用 addLoadEvent(),延迟预加载时间,直到页面加载完毕。
function preloader() {
if (document.images) {
var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
img1.src = "http://domain.tld/path/to/image-001.gif";
img2.src = "http://domain.tld/path/to/image-002.gif";
img3.src = "http://domain.tld/path/to/image-003.gif";
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(preloader);
上面所给出的方法似乎不够酷,那现在来看一个使用Ajax实现图片预加载的方法。该方法利用DOM,不仅仅预加载图片,还会预加载CSS、JavaScript等相关的东西。使用Ajax,比直接使用JavaScript,优越之处在于JavaScript和CSS的加载不会影响到当前页面。该方法简洁、高效。
window.onload = function() {
setTimeout(function() {
// XHR to request a js and a CSS
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://domain.tld/preload.js');
xhr.send('');
xhr = new XMLHttpRequest();
xhr.open('GET', 'http://domain.tld/preload.css');
xhr.send('');
// preload image
new Image().src = "http://domain.tld/preload.png";
}, 1000);
};
上面代码预加载了“preload.js”、“preload.css”和“preload.png”。1000毫秒的超时是为了防止脚本挂起,而导致正常页面出现功能问题。
下面,我们看看如何用JavaScript来实现该加载过程:
window.onload = function() {
setTimeout(function() {
// reference to <head>
var head = document.getElementsByTagName('head')[0];
// a new CSS
var css = document.createElement('link');
css.type = "text/css";
css.rel = "stylesheet";
css.href = "http://domain.tld/preload.css";
// a new JS
var js = document.createElement("script");
js.type = "text/javascript";
js.src = "http://domain.tld/preload.js";
// preload JS and CSS
head.appendChild(css);
head.appendChild(js);
// preload image
new Image().src = "http://domain.tld/preload.png";
}, 1000);
};
这里,我们通过DOM创建三个元素来实现三个文件的预加载。正如上面提到的那样,使用Ajax,加载文件不会应用到加载页面上。从这点上看,Ajax方法优越于JavaScript。
- End -
台给的base64格式的图片如下
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
看好了,就是拼接一个'data:image/jpg;base64,'+就可以了。
<img :src="'data:image/jpg;base64,'+captchaURL" alt="验证码" />
扩展
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据
为一个程序员,一个热爱技术写作的人,把自己的知识经验通过文字呈现在读者面前,并且让读者通过文字,就能将知识进行学以致用,其实,是非常有调整性的一件事情,因为,它需要我与读者保持有效沟通,既不浪费读者的时间,也不浪费自己的时间,同时还要保证读者能够读有所获。
由于技术文章的质量很大程度上取决于其内容的易消化程度,因此,我倾向于利用以图形交换格式 (GIF) 格式编码的屏幕截图,以尽可能减少额外的文本描述块。例如,在更倾向于 Web 开发内容的文章中,例如:
在这种情况下,我总是发现嵌入动画 GIF 来演示我创建的开源工具的任何用法是有益的:
鉴于 Microsoft Powerpoint 的内置屏幕录制功能很容易访问,虽然,可以轻松完成自己的屏幕录制以输出屏幕截图,但我觉得更有益的探索领域将是 - 易于访问转换视频的工具 将屏幕截图(.mp4、.avi 等)转换为 .GIF 图像文件。
— 注意:按照惯例,如果要渲染动画短片(≤ 30 秒),则 GIF 文件更合适。
使用 GIFEncoder.js 将视频构建到 GIF Maker
为了构建浏览器实用程序,如下所示:
这 3 个 JavaScript 插件是必需的:
仅供参考:这些插件最初是由 GitHub 用户 Kevin Kwok(创建者)从 GitHub repo jsgif 中检索到的。
视频到 GIF 转换概述
先决条件:包含在上述3个文件中+ b64.js如下:
<script type="text/javascript" src="LZWEncoder.js"></script>
<script type="text/javascript" src="NeuQuant.js"></script>
<script type="text/javascript" src="GIFEncoder.js"></script>
<script type="text/javascript" src="b64.js"></script>
技术实施——总共 4 个步骤
步骤(1):上传视频片段(≤30秒)
因此,在 HTML 代码中,包含一个简单的用户输入界面:
<input id='inputVideoClipFile' type='file' multiple='false'
accept='.mp4,.webm,.avi,.mpeg,.flv,.mov,.3gp' />
将事件处理程序(onchange)标记到上面并继续在 JavaScript 中初始化 FileReader 实例:
inputVideoClipFile.onchange = function(uploadFle) {
let file = inputVideoClipFile.files[0];
let fileName=file.name;
let fileSize=(file.size/1024).toFixed(2);
let fileType=file.type;
let fileredr = new FileReader();
fileredr.onload = function (fle) {
var b64Str=fle.target.result;
}; // end file-reader onload
fileredr.readAsDataURL(file);
};
请注意,新的 FileReader() 实例调用 readAsDataURL,因此分配给 b64Str 的视频文件内容被读取为 Base64 字符串。
从文件对象中检索视频文件的信息以供稍后显示。
步骤(2):处理视频二进制数据并提取帧,有两个主要部分需要考虑:
Part I. 通过创建 <video></video> DOM 元素并在 JavaScript 中分配相应的属性来预览视频内容以供显示.
// rendered as <video></video> in HTML code
var videoObj = document.createElement('video');
var displayedHeight=500;
if(videoObj.canPlayType(fileType)) {
videoObj.setAttribute('id','inputVideo');
videoObj.setAttribute('src', b64Str);
videoObj.setAttribute('height', displayedHeight);
}
注意b64Str是前面步骤中FileReader()读取的视频文件数据。
第二部分,帧提取——每个视频帧都指的是剪辑在唯一时间戳的图像快照。
由于 GIF 文件是通过合并一组连续的图像创建的,因此,对于视频的每一次时间图形更新,都需要提取一个嵌入了图像数据的帧,用于后续的 GIF 创建过程。
虽然不能直接从 DOM 元素 <video></video> 中提取每个视频帧所需的图像数据,但可以将 <video></video> 中的预览内容渲染到 <canvas></canvas> 元素上 帧图像数据提取。
接下来,在 JavaScript 中创建一个 <canvas></canvas> 元素并为其分配相应的属性(类似于 <video></video>):
var vidHeight=videoObj.videoHeight;
var vidWidth=videoObj.videoWidth;
var bitmap = document.createElement('canvas');
bitmap.setAttribute('id', 'bitmap');
bitmap.setAttribute('width', vidWidth);
bitmap.setAttribute('height', vidHeight);
请注意,vidWidth 和 vidHeight 是从 <video></video> 检索的。(这些是剪辑的原始尺寸。)
接下来的几行代码基于标记到每个元素的 'id' 属性来引用<video></video> 和 <canvas></canvas>::
const inputVideo=document.getElementById('inputVideo');
const bitmapCanvas=document.getElementById('bitmap');
const bitmapCtx = bitmapCanvas.getContext('2d');
inputVideo.muted = true;
inputVideo.loop = false;
inputVideo.autoplay=true;
const background = () => {
bitmapCtx.fillStyle = '#FFFFFF';
bitmapCtx.fillRect(0, 0, vidWidth, vidHeight);
};
由于视频设置为自动播放,当播放事件被发出时,这会触发 background() 的执行,它不仅将 GIF 背景填充为白色,而且还设置了绘制到 canvas 元素上的每一帧的尺寸:
const step = async() => {
let bgStatus=await background();
await new Promise(resolve => {
bitmapCtx.drawImage(inputVideo, 0, 0, vidWidth, vidHeight);
frameB64Str = bitmapCanvas.toDataURL();
resolve();
});
window.requestAnimationFrame(step);
};
inputVideo.addEventListener('play', () => {
step();
window.requestAnimationFrame(step);
});
window.requestAnimationFrame(step) 接受一个回调函数(即step())来处理每一帧的图像数据。
bitmapCtx.drawImage() 继续将每个图像快照渲染到画布上,以便 bitmapCanvas.toDataURL() 返回每个快照的 base64 编码图像。
步骤(3):依次合并所有图像快照
最后实现了JS插件GIFEncoder.js。使用与上面相同的代码片段,以下粗体代码行指的是 GIFEncoder 编码器捕获嵌入在 <canvas></canvas> 中的每个数据帧的实例。
const encoder = new GIFEncoder(vidWidth, vidHeight);
encoder.setRepeat(0);
encoder.setDelay(500);
const step = async() => {
let bgStatus=await background();
await new Promise(resolve => {
bitmapCtx.drawImage(inputVideo, 0, 0, vidWidth, vidHeight);
frameB64Str = bitmapCanvas.toDataURL();
encoder.addFrame(bitmapCtx);
resolve();
});
window.requestAnimationFrame(step);
};
inputVideo.addEventListener('play', () => {
encoder.start();
step();
window.requestAnimationFrame(step);
});
当上传的视频最终播放完整时长时,应在 GIFEncoder 调用方法 finish() 的地方发出结束事件:
inputVideo.addEventListener('ended', () => {
encoder.finish();
});
步骤 (4):通过 GIFEncoder 创建 GIF
要从编码器中提取所有帧的合并版本(即 GIF 输出),需要实现以下 JavaScript 代码片段:
var fileType='image/gif';
var readableStream=encoder.stream();
var binary_gif=readableStream.getData();
var b64Str='data:'+fileType+';base64,'+encode64(binary_gif);
encode64() 是 b64.js 中的一种方法,用于将 GIFEncoder 捕获的流数据转换为 Base64 格式。
b64Str 通过合并 GIFEncoder 中存在的所有帧来引用为 GIF 文件编码的数据。因此,在 HTML 代码中,继续包含:<img id='outputGif' src='${b64Str}' alt='${fileName}' />以预览输出 GIF 文件。
最后创建一个GIF文件的下载链接,如下:
let dwnlnk = document.createElement('a');
dwnlnk.download = fileName;
dwnlnk.innerHTML = ` <small>Save</small>`;
dwnlnk.className = 'btn btn-outline-dark';
dwnlnk.href = b64Str;
仅供参考:完整的放在我的 GitHub:video-to-GIFhttps://github.com/incubated-geek-cc/video-to-GIF
总结
虽然,有进一步探索 GIFEncoder.js 中输出 GIF 文件的可定制调整的空间,但本文介绍的是一种基本的轻量级方法,该方法可以完全在浏览器中和纯客户端将视频剪辑转换为 GIF 文件。
- End -
*请认真填写需求信息,我们会在24小时内与您取得联系。