vue +websocket 加载动图并实现暂停与播放

需求一：页面有小动图点击放大并实现暂停与播放

1、页面调用+点击放大以及调用组件时实现标题效果

<div class="" v-show="WRFgif"><img @click="bigWRFgif()" id="testImg" class="Rightoneimg" :src="接口获取的地址" alt="" />
</div>
//添加遮罩层，实现点击空白处关闭大图<div class="msk" @click.self="bigWRFgifShow=false" v-show="bigWRFgifShow"><div class="bigWRFgif" v-show="bigWRFgifShow"><div class="titlebg"><span class="text show_txt">WRF数据</span></div>
//调用播放、暂停组件；传值<gifComponents :imgUrlGIF="接口获取的地址（同上）" :key="接口获取的地址（同上）" /></div></div>
<script>
//引入组件(自定义名称）
import gifComponents from "../../components/gifComponents/index.vue";
return{
//默认不展示大的动图
bigWRFgifShow: false,
接口获取的地址:'',
}
components: {gifComponents,},
//写在页面里的调取接口的方法参照同系列其他文章
//点击事件-展示大图bigWRFgif() {this.bigWRFgifShow = !this.bigWRFgifShow},

2、组件内容

<template><div class="gifComponents"><!--gif动图 auto_play=0：自动播放；1：不自动播放--><div class="imgbox"><img id="example1" :rel:animated_src="imgUrlGIF" :rel:auto_play="1" :rel:rubbable="1"/></div><br/><!--按钮--><div class="Buttonbox"><div class="play"><img @click="stopGif()" v-if="stop" class="startimg" src="@/assets/start.png" alt="" /><img @click="stopGif()" v-else class="stopimg" src="@/assets/stop.png" alt="" /></div></div></div>
</template>
<script>
// 引用libgif.js
import SuperGif from "./libgif.js";
export default {name: "gifComponents",// 接收父组件传递的参数props: {imgUrlGIF: {type:String,default:""}},data() {return {sup1: null,//gifstop: true,//是否暂停};},//异步加载钩子函数async mounted() {try {//初始化gif元素this.InitSuperGif();} catch (e) {console.error("程序错误", e);}},methods: {//初始化gif元素InitSuperGif() {// 通过异步函数，获取gif文件const sup1 = new SuperGif({gif: document.getElementById("example1"),progressbar_height: 0,//加载进度条高度});//加载元素sup1.load();this.sup1 = sup1;},//暂停stopGif() {if (this.stop) {this.sup1.pause();this.stop = false} else {this.sup1.play();this.stop = true}}},
};
</script><style lang="scss" scoped>
.gifComponents {margin-top: 30px;width: 100%;.imgbox {width: 100%;height: 100%;padding-left: 35px;padding-top:  5%;#example1{position: absolute;left: 50%;top: 50%;}}.Buttonbox {display: flex;flex-flow: row nowrap;justify-content: flex-start;margin-left: 90px;margin-top: 30px;.play img{position: absolute;right: 30px;}.itembox {width: 96px;padding: 0 15px;height: 32px;line-height: 32px;text-align: center;white-space: nowrap;cursor: pointer;background: coral;margin-right: 10px;color: #fff;&:hover {background: rgb(219, 148, 122);}}}
}
</style>

需求二：页面有列表小动图点击在旁边放大并实现暂停与播放

 <div class=" center"><div class="left"><ul class=""><li v-for="(item,index) in wrfList" :key="index" :class="[index===imgListIndex?'active':'']"@click="setStyle(index)"><span>{{index+1}}</span><img :src="item"></li></ul></div><div class="PAright">
//动态组件，组件内容用上面的即可<gifComponentsRB :imgUrlGIF="rightImg" :key="rightImg" /></div></div>
return{imgListIndex: 0,wrfList: [],rightImg: '',
}，
//websocket里部分内容
that.CL_Cnwebsocket.onmessage = function(res) {let val = JSON.parse(res.data)val = JSON.parse(val.listCLCN2)let base_url = 'api'that.wrfList = [];for (let i = 0; i < val.length; i++) {that.wrfList.push(base_url + val[i].cl_wrf_p);}if (that.rightImg === null || ('unknown')) {that.rightImg = that.wrfList[0]}};
setStyle(index) {this.imgListIndex = indexthis.rightImg = this.wrfList[index]},

3、JS文件//直接用即可


(function(root, factory) {console.log("root", root)if (typeof define === 'function' && define.amd) {define([], factory);} else if (typeof exports === 'object') {module.exports = factory();} else {root.SuperGif = factory();}
}(this, function() {// Generic functionsvar bitsToNum = function(ba) {return ba.reduce(function(s, n) {return s * 2 + n;}, 0);};var byteToBitArr = function(bite) {var a = [];for (var i = 7; i >= 0; i--) {a.push(!!(bite & (1 << i)));}return a;};// Stream/*** @constructor*/// Make compiler happy.var Stream = function(data) {this.data = data;this.len = this.data.length;this.pos = 0;this.readByte = function() {if (this.pos >= this.data.length) {throw new Error('Attempted to read past end of stream.');}if (data instanceof Uint8Array)return data[this.pos++];elsereturn data.charCodeAt(this.pos++) & 0xFF;};this.readBytes = function(n) {var bytes = [];for (var i = 0; i < n; i++) {bytes.push(this.readByte());}return bytes;};this.read = function(n) {var s = '';for (var i = 0; i < n; i++) {s += String.fromCharCode(this.readByte());}return s;};this.readUnsigned = function() { // Little-endian.var a = this.readBytes(2);return (a[1] << 8) + a[0];};};var lzwDecode = function(minCodeSize, data) {// TODO: Now that the GIF parser is a bit different, maybe this should get an array of bytes instead of a String?var pos = 0; // Maybe this streaming thing should be merged with the Stream?var readCode = function(size) {var code = 0;for (var i = 0; i < size; i++) {if (data.charCodeAt(pos >> 3) & (1 << (pos & 7))) {code |= 1 << i;}pos++;}return code;};var output = [];var clearCode = 1 << minCodeSize;var eoiCode = clearCode + 1;var codeSize = minCodeSize + 1;var dict = [];var clear = function() {dict = [];codeSize = minCodeSize + 1;for (var i = 0; i < clearCode; i++) {dict[i] = [i];}dict[clearCode] = [];dict[eoiCode] = null;};var code;var last;while (true) {last = code;code = readCode(codeSize);if (code === clearCode) {clear();continue;}if (code === eoiCode) break;if (code < dict.length) {if (last !== clearCode) {dict.push(dict[last].concat(dict[code][0]));}} else {if (code !== dict.length) throw new Error('Invalid LZW code.');dict.push(dict[last].concat(dict[last][0]));}output.push.apply(output, dict[code]);if (dict.length === (1 << codeSize) && codeSize < 12) {// If we're at the last code and codeSize is 12, the next code will be a clearCode, and it'll be 12 bits long.codeSize++;}}// I don't know if this is technically an error, but some GIFs do it.//if (Math.ceil(pos / 8) !== data.length) throw new Error('Extraneous LZW bytes.');return output;};// The actual parsing; returns an object with properties.var parseGIF = function(st, handler) {handler || (handler = {});// LZW (GIF-specific)var parseCT = function(entries) { // Each entry is 3 bytes, for RGB.var ct = [];for (var i = 0; i < entries; i++) {ct.push(st.readBytes(3));}return ct;};var readSubBlocks = function() {var size, data;data = '';do {size = st.readByte();data += st.read(size);} while (size !== 0);return data;};var parseHeader = function() {var hdr = {};hdr.sig = st.read(3);hdr.ver = st.read(3);if (hdr.sig !== 'GIF') throw new Error('Not a GIF file.'); // XXX: This should probably be handled more nicely.hdr.width = st.readUnsigned();hdr.height = st.readUnsigned();var bits = byteToBitArr(st.readByte());hdr.gctFlag = bits.shift();hdr.colorRes = bitsToNum(bits.splice(0, 3));hdr.sorted = bits.shift();hdr.gctSize = bitsToNum(bits.splice(0, 3));hdr.bgColor = st.readByte();hdr.pixelAspectRatio = st.readByte(); // if not 0, aspectRatio = (pixelAspectRatio + 15) / 64if (hdr.gctFlag) {hdr.gct = parseCT(1 << (hdr.gctSize + 1));}handler.hdr && handler.hdr(hdr);};var parseExt = function(block) {var parseGCExt = function(block) {var blockSize = st.readByte(); // Always 4var bits = byteToBitArr(st.readByte());block.reserved = bits.splice(0, 3); // Reserved; should be 000.block.disposalMethod = bitsToNum(bits.splice(0, 3));block.userInput = bits.shift();block.transparencyGiven = bits.shift();block.delayTime = st.readUnsigned();block.transparencyIndex = st.readByte();block.terminator = st.readByte();handler.gce && handler.gce(block);};var parseComExt = function(block) {block.comment = readSubBlocks();handler.com && handler.com(block);};var parsePTExt = function(block) {// No one *ever* uses this. If you use it, deal with parsing it yourself.var blockSize = st.readByte(); // Always 12block.ptHeader = st.readBytes(12);block.ptData = readSubBlocks();handler.pte && handler.pte(block);};var parseAppExt = function(block) {var parseNetscapeExt = function(block) {var blockSize = st.readByte(); // Always 3block.unknown = st.readByte(); // ??? Always 1? What is this?block.iterations = st.readUnsigned();block.terminator = st.readByte();handler.app && handler.app.NETSCAPE && handler.app.NETSCAPE(block);};var parseUnknownAppExt = function(block) {block.appData = readSubBlocks();// FIXME: This won't work if a handler wants to match on any identifier.handler.app && handler.app[block.identifier] && handler.app[block.identifier](block);};var blockSize = st.readByte(); // Always 11block.identifier = st.read(8);block.authCode = st.read(3);switch (block.identifier) {case 'NETSCAPE':parseNetscapeExt(block);break;default:parseUnknownAppExt(block);break;}};var parseUnknownExt = function(block) {block.data = readSubBlocks();handler.unknown && handler.unknown(block);};block.label = st.readByte();switch (block.label) {case 0xF9:block.extType = 'gce';parseGCExt(block);break;case 0xFE:block.extType = 'com';parseComExt(block);break;case 0x01:block.extType = 'pte';parsePTExt(block);break;case 0xFF:block.extType = 'app';parseAppExt(block);break;default:block.extType = 'unknown';parseUnknownExt(block);break;}};var parseImg = function(img) {var deinterlace = function(pixels, width) {// Of course this defeats the purpose of interlacing. And it's *probably*// the least efficient way it's ever been implemented. But nevertheless...var newPixels = new Array(pixels.length);var rows = pixels.length / width;var cpRow = function(toRow, fromRow) {var fromPixels = pixels.slice(fromRow * width, (fromRow + 1) * width);newPixels.splice.apply(newPixels, [toRow * width, width].concat(fromPixels));};// See appendix E.var offsets = [0, 4, 2, 1];var steps = [8, 8, 4, 2];var fromRow = 0;for (var pass = 0; pass < 4; pass++) {for (var toRow = offsets[pass]; toRow < rows; toRow += steps[pass]) {cpRow(toRow, fromRow)fromRow++;}}return newPixels;};img.leftPos = st.readUnsigned();img.topPos = st.readUnsigned();img.width = st.readUnsigned();img.height = st.readUnsigned();var bits = byteToBitArr(st.readByte());img.lctFlag = bits.shift();img.interlaced = bits.shift();img.sorted = bits.shift();img.reserved = bits.splice(0, 2);img.lctSize = bitsToNum(bits.splice(0, 3));if (img.lctFlag) {img.lct = parseCT(1 << (img.lctSize + 1));}img.lzwMinCodeSize = st.readByte();var lzwData = readSubBlocks();img.pixels = lzwDecode(img.lzwMinCodeSize, lzwData);if (img.interlaced) { // Moveimg.pixels = deinterlace(img.pixels, img.width);}handler.img && handler.img(img);};var parseBlock = function() {var block = {};block.sentinel = st.readByte();switch (String.fromCharCode(block.sentinel)) { // For ease of matchingcase '!':block.type = 'ext';parseExt(block);break;case ',':block.type = 'img';parseImg(block);break;case ';':block.type = 'eof';handler.eof && handler.eof(block);break;default:throw new Error('Unknown block: 0x' + block.sentinel.toString(16)); // TODO: Pad this with a 0.}if (block.type !== 'eof') setTimeout(parseBlock, 0);};var parse = function() {parseHeader();setTimeout(parseBlock, 0);};parse();};var SuperGif = function(opts) {var options = {//viewport positionvp_l: 0,vp_t: 0,vp_w: null,vp_h: null,//canvas sizesc_w: null,c_h: null};for (var i in opts) { options[i] = opts[i] }if (options.vp_w && options.vp_h) options.is_vp = true;var stream;var hdr;var loadError = null;var loading = false;var transparency = null;var delay = null;var disposalMethod = null;var disposalRestoreFromIdx = null;var lastDisposalMethod = null;var frame = null;var lastImg = null;var playing = true;var forward = true;var ctx_scaled = false;var frames = [];var frameOffsets = []; // elements have .x and .y propertiesvar gif = options.gif;if (typeof options.auto_play == 'undefined')options.auto_play = (!gif.getAttribute('rel:auto_play') || gif.getAttribute('rel:auto_play') == '1');var onEndListener = (options.hasOwnProperty('on_end') ? options.on_end : null);var loopDelay = (options.hasOwnProperty('loop_delay') ? options.loop_delay : 0);var overrideLoopMode = (options.hasOwnProperty('loop_mode') ? options.loop_mode : 'auto');var drawWhileLoading = (options.hasOwnProperty('draw_while_loading') ? options.draw_while_loading : true);var showProgressBar = drawWhileLoading ? (options.hasOwnProperty('show_progress_bar') ? options.show_progress_bar : true) : false;var progressBarHeight = (options.hasOwnProperty('progressbar_height') ? options.progressbar_height : 25);// var progressBarBackgroundColor = (options.hasOwnProperty('progressbar_background_color') ? options.progressbar_background_color : 'rgba(255,255,255,0.4)');// var progressBarForegroundColor = (options.hasOwnProperty('progressbar_foreground_color') ? options.progressbar_foreground_color : 'rgba(255,0,22,.8)');//进度条颜色var progressBarBackgroundColor = (options.hasOwnProperty('progressbar_background_color') ? 'rgba(255,255,255,0)' : 'rgba(255,255,255,0.4)');var progressBarForegroundColor = (options.hasOwnProperty('progressbar_foreground_color') ? 'rgba(9, 61, 120, 1)' : 'rgba(255,0,22,.8)');var clear = function() {transparency = null;delay = null;lastDisposalMethod = disposalMethod;disposalMethod = null;frame = null;};// XXX: There's probably a better way to handle catching exceptions when// callbacks are involved.var doParse = function() {try {parseGIF(stream, handler);} catch (err) {doLoadError('parse');}};var doText = function(text) {toolbar.innerHTML = text; // innerText? Escaping? Whatever.toolbar.style.visibility = 'visible';};var setSizes = function(w, h) {canvas.width = w * get_canvas_scale();canvas.height = h * get_canvas_scale();toolbar.style.minWidth = (w * get_canvas_scale()) + 'px';tmpCanvas.width = w;tmpCanvas.height = h;tmpCanvas.style.width = w + 'px';tmpCanvas.style.height = h + 'px';tmpCanvas.getContext('2d').setTransform(1, 0, 0, 1, 0, 0);};var setFrameOffset = function(frame, offset) {if (!frameOffsets[frame]) {frameOffsets[frame] = offset;return;}if (typeof offset.x !== 'undefined') {frameOffsets[frame].x = offset.x;}if (typeof offset.y !== 'undefined') {frameOffsets[frame].y = offset.y;}};var doShowProgress = function(pos, length, draw) {if (draw && showProgressBar) {var height = progressBarHeight;var left, mid, top, width;if (options.is_vp) {if (!ctx_scaled) {top = (options.vp_t + options.vp_h - height);height = height;left = options.vp_l;mid = left + (pos / length) * options.vp_w;width = canvas.width;} else {top = (options.vp_t + options.vp_h - height) / get_canvas_scale();height = height / get_canvas_scale();left = (options.vp_l / get_canvas_scale());mid = left + (pos / length) * (options.vp_w / get_canvas_scale());width = canvas.width / get_canvas_scale();}//some debugging, draw rect around viewportif (false) {if (!ctx_scaled) {var l = options.vp_l,t = options.vp_t;var w = options.vp_w,h = options.vp_h;} else {var l = options.vp_l / get_canvas_scale(),t = options.vp_t / get_canvas_scale();var w = options.vp_w / get_canvas_scale(),h = options.vp_h / get_canvas_scale();}ctx.rect(l, t, w, h);ctx.stroke();}} else {top = (canvas.height - height) / (ctx_scaled ? get_canvas_scale() : 1);mid = ((pos / length) * canvas.width) / (ctx_scaled ? get_canvas_scale() : 1);width = canvas.width / (ctx_scaled ? get_canvas_scale() : 1);height /= ctx_scaled ? get_canvas_scale() : 1;}ctx.fillStyle = progressBarBackgroundColor;ctx.fillRect(mid, top, width - mid, height);ctx.fillStyle = progressBarForegroundColor;ctx.fillRect(0, top, mid, height);}};var doLoadError = function(originOfError) {var drawError = function() {ctx.fillStyle = 'black';ctx.fillRect(0, 0, options.c_w ? options.c_w : hdr.width, options.c_h ? options.c_h : hdr.height);ctx.strokeStyle = 'red';ctx.lineWidth = 3;ctx.moveTo(0, 0);ctx.lineTo(options.c_w ? options.c_w : hdr.width, options.c_h ? options.c_h : hdr.height);ctx.moveTo(0, options.c_h ? options.c_h : hdr.height);ctx.lineTo(options.c_w ? options.c_w : hdr.width, 0);ctx.stroke();};loadError = originOfError;hdr = {width: gif.width,height: gif.height}; // Fake header.frames = [];drawError();};var doHdr = function(_hdr) {hdr = _hdr;setSizes(hdr.width, hdr.height)};var doGCE = function(gce) {pushFrame();clear();transparency = gce.transparencyGiven ? gce.transparencyIndex : null;delay = gce.delayTime;disposalMethod = gce.disposalMethod;// We don't have much to do with the rest of GCE.};var pushFrame = function() {if (!frame) return;frames.push({data: frame.getImageData(0, 0, hdr.width, hdr.height),delay: delay});frameOffsets.push({ x: 0, y: 0 });};var doImg = function(img) {if (!frame) frame = tmpCanvas.getContext('2d');var currIdx = frames.length;//ct = color table, gct = global color tablevar ct = img.lctFlag ? img.lct : hdr.gct; // TODO: What if neither exists?/*Disposal method indicates the way in which the graphic is tobe treated after being displayed.Values :    0 - No disposal specified. The decoder isnot required to take any action.1 - Do not dispose. The graphic is to be leftin place.2 - Restore to background color. The area used by thegraphic must be restored to the background color.3 - Restore to previous. The decoder is required torestore the area overwritten by the graphic withwhat was there prior to rendering the graphic.Importantly, "previous" means the frame stateafter the last disposal of method 0, 1, or 2.*/if (currIdx > 0) {if (lastDisposalMethod === 3) {// Restore to previous// If we disposed every frame including first frame up to this point, then we have// no composited frame to restore to. In this case, restore to background instead.if (disposalRestoreFromIdx !== null) {frame.putImageData(frames[disposalRestoreFromIdx].data, 0, 0);} else {frame.clearRect(lastImg.leftPos, lastImg.topPos, lastImg.width, lastImg.height);}} else {disposalRestoreFromIdx = currIdx - 1;}if (lastDisposalMethod === 2) {// Restore to background color// Browser implementations historically restore to transparent; we do the same.// http://www.wizards-toolkit.org/discourse-server/viewtopic.php?f=1&t=21172#p86079frame.clearRect(lastImg.leftPos, lastImg.topPos, lastImg.width, lastImg.height);}}// else, Undefined/Do not dispose.// frame contains final pixel data from the last frame; do nothing//Get existing pixels for img region after applying disposal methodvar imgData = frame.getImageData(img.leftPos, img.topPos, img.width, img.height);//apply color table colorsimg.pixels.forEach(function(pixel, i) {// imgData.data === [R,G,B,A,R,G,B,A,...]if (pixel !== transparency) {imgData.data[i * 4 + 0] = ct[pixel][0];imgData.data[i * 4 + 1] = ct[pixel][1];imgData.data[i * 4 + 2] = ct[pixel][2];imgData.data[i * 4 + 3] = 255; // Opaque.}});frame.putImageData(imgData, img.leftPos, img.topPos);if (!ctx_scaled) {ctx.scale(get_canvas_scale(), get_canvas_scale());ctx_scaled = true;}// We could use the on-page canvas directly, except that we draw a progress// bar for each image chunk (not just the final image).if (drawWhileLoading) {ctx.drawImage(tmpCanvas, 0, 0);drawWhileLoading = options.auto_play;}lastImg = img;};var player = (function() {var i = -1;var iterationCount = 0;var showingInfo = false;var pinned = false;/*** Gets the index of the frame "up next".* @returns {number}*/var getNextFrameNo = function() {var delta = (forward ? 1 : -1);return (i + delta + frames.length) % frames.length;};var stepFrame = function(amount) { // XXX: Name is confusing.i = i + amount;putFrame();};var step = (function() {var stepping = false;var completeLoop = function() {if (onEndListener !== null)onEndListener(gif);iterationCount++;if (overrideLoopMode !== false || iterationCount < 0) {doStep();} else {stepping = false;playing = false;}};var doStep = function() {stepping = playing;if (!stepping) return;stepFrame(1);var delay = frames[i].delay * 10;if (!delay) delay = 100; // FIXME: Should this even default at all? What should it be?var nextFrameNo = getNextFrameNo();if (nextFrameNo === 0) {delay += loopDelay;setTimeout(completeLoop, delay);} else {setTimeout(doStep, delay);}};return function() {if (!stepping) setTimeout(doStep, 0);};}());var putFrame = function() {var offset;i = parseInt(i, 10);if (i > frames.length - 1) {i = 0;}if (i < 0) {i = 0;}offset = frameOffsets[i];tmpCanvas.getContext("2d").putImageData(frames[i].data, offset.x, offset.y);ctx.globalCompositeOperation = "copy";ctx.drawImage(tmpCanvas, 0, 0);};var play = function() {playing = true;step();};var pause = function() {playing = false;};return {init: function() {if (loadError) return;if (!(options.c_w && options.c_h)) {ctx.scale(get_canvas_scale(), get_canvas_scale());}if (options.auto_play) {step();} else {i = 0;putFrame();}},step: step,play: play,pause: pause,playing: playing,move_relative: stepFrame,current_frame: function() { return i; },length: function() { return frames.length },move_to: function(frame_idx) {i = frame_idx;putFrame();}}}());var doDecodeProgress = function(draw) {//进度条是否显示doShowProgress(stream.pos, stream.data.length, draw);};var doNothing = function() {};/*** @param{boolean=} draw Whether to draw progress bar or not; this is not idempotent because of translucency.*                       Note that this means that the text will be unsynchronized with the progress bar on non-frames;*                       but those are typically so small (GCE etc.) that it doesn't really matter. TODO: Do this properly.*/var withProgress = function(fn, draw) {return function(block) {fn(block);doDecodeProgress(draw);};};var handler = {hdr: withProgress(doHdr),gce: withProgress(doGCE),com: withProgress(doNothing),// I guess that's all for now.app: {// TODO: Is there much point in actually supporting iterations?NETSCAPE: withProgress(doNothing)},img: withProgress(doImg, true),eof: function(block) {//toolbar.style.display = '';pushFrame();doDecodeProgress(false);if (!(options.c_w && options.c_h)) {canvas.width = hdr.width * get_canvas_scale();canvas.height = hdr.height * get_canvas_scale();}player.init();loading = false;if (load_callback) {load_callback(gif);}}};var init = function() {var parent = gif.parentNode;var div = document.createElement('div');canvas = document.createElement('canvas');ctx = canvas.getContext('2d');toolbar = document.createElement('div');tmpCanvas = document.createElement('canvas');div.width = canvas.width = gif.width;div.height = canvas.height = gif.height;canvas.style.maxWidth = '85%';toolbar.style.minWidth = gif.width + 'px';div.className = 'jsgif';toolbar.className = 'jsgif_toolbar';div.appendChild(canvas);div.appendChild(toolbar);parent.insertBefore(div, gif);parent.removeChild(gif);if (options.c_w && options.c_h) setSizes(options.c_w, options.c_h);initialized = true;};var get_canvas_scale = function() {var scale;if (options.max_width && hdr && hdr.width > options.max_width) {scale = options.max_width / hdr.width;} else {scale = 1;}return scale;}var canvas, ctx, toolbar, tmpCanvas;var initialized = false;var load_callback = false;var load_setup = function(callback) {if (loading) return false;if (callback) load_callback = callback;else load_callback = false;loading = true;frames = [];clear();disposalRestoreFromIdx = null;lastDisposalMethod = null;frame = null;lastImg = null;return true;}return {// play controlsplay: player.play,pause: player.pause,move_relative: player.move_relative,move_to: player.move_to,// getters for instance varsget_playing: function() { return playing },get_canvas: function() { return canvas },get_canvas_scale: function() { return get_canvas_scale() },get_loading: function() { return loading },get_auto_play: function() { return options.auto_play },get_length: function() { return player.length() },get_current_frame: function() { return player.current_frame() },load_url: function(src, callback) {if (!load_setup(callback)) return;var h = new XMLHttpRequest();// new browsers (XMLHttpRequest2-compliant)h.open('GET', src, true);if ('overrideMimeType' in h) {h.overrideMimeType('text/plain; charset=x-user-defined');}// old browsers (XMLHttpRequest-compliant)else if ('responseType' in h) {h.responseType = 'arraybuffer';}// IE9 (Microsoft.XMLHTTP-compliant)else {h.setRequestHeader('Accept-Charset', 'x-user-defined');}h.onloadstart = function() {// Wait until connection is opened to replace the gif element with a canvas to avoid a blank imgif (!initialized) init();};h.onload = function(e) {if (this.status != 200) {doLoadError('xhr - response');}// emulating response field for IE9if (!('response' in this)) {this.response = new VBArray(this.responseText).toArray().map(String.fromCharCode).join('');}var data = this.response;if (data.toString().indexOf("ArrayBuffer") > 0) {data = new Uint8Array(data);}stream = new Stream(data);setTimeout(doParse, 0);};h.onprogress = function(e) {if (e.lengthComputable) doShowProgress(e.loaded, e.total, true);};h.onerror = function() { doLoadError('xhr'); };h.send();},load: function(callback) {this.load_url(gif.getAttribute('rel:animated_src') || gif.src, callback);},load_raw: function(arr, callback) {if (!load_setup(callback)) return;if (!initialized) init();stream = new Stream(arr);setTimeout(doParse, 0);},set_frame_offset: setFrameOffset};};return SuperGif;
}));

vue +websocket 加载动图并实现暂停与播放相关推荐

Fresco本地加载【圆角，圆形，比例，渐进，加载动图】
导入依赖 implementation 'com.facebook.fresco:fresco:0.13.0'//fresco依赖implementation 'com.facebook.fresco ...
python 加载动图_在浏览器中使用TensorFlow.js和Python构建机器学习模型（附代码）...
大数据文摘授权转载自数据派THU 作者:MOHD SANAD ZAKI RIZVI 本文主要介绍了: TensorFlow.js (deeplearn.js)使我们能够在浏览器中构建机器学习和深度学习 ...
cesium加载动图方案三：通过apng-js库实现
1.项目场景实际开发中我们经常会有动图加载的需求,而Cesium不支持纹理贴动图,怎么样基于Cesium实现动图的加载,值得我们研究一波.cesium加载gif格式的动图有些场景能够满足我们的需求, ...
加载动图的实现及属性动画的使用
昨天在一个APP上面看见一个吃东西的加载图,感觉挺简单的,于是打算去实现.但是在实现的过程中踩了一些坑,那个图也不能找到做参考了,于是自己琢磨了一个下午,终于实现了效果.因此这里将整个过程做一个复盘, ...
推荐一个加载动图的网站loading.io
推荐一个非常好玩的loading gif的资源网站:https://loading.io/ 里面有各种loading的动图. 转载于:https://www.cnblogs.com/zifeiy/p/ ...
vue openlayers 加载高德地图等 gcj02 的图层偏移问题
vue openlayers 加载高德地图等 gcj02 的图层偏移问题这个问题是在使用 openlayers 地图引擎加载高德地图或者是谷歌地图都会遇到的问题,所以说呢这篇博文稍微说一下解决办法. ...
7 种最棒的 Vue Loading 加载动画组件测评与推荐 - 穷尽市面上所有加载动画效果（Vue loader）类型
本文完整版:<7 种最棒的 Vue Loading 加载动画组件测评与推荐> 目录 7 种不同类型的 Vue Loading 加载动画组件 1. Vue Simple Spinner - ...
vue : 无法加载文件 C:\Users\lenovo\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。解决方法
vue : 无法加载文件 C:\Users\lenovo\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本. 在安装vue-cli工具时安装失败如图: 解决方法,以管 ...
Android 高清加载巨图方案拒绝压缩图片
Android 高清加载巨图方案拒绝压缩图片转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/49300989: 本文出自: ...

vue +websocket 加载动图并实现暂停与播放

vue +websocket 加载动图并实现暂停与播放相关推荐

最新文章

热门文章