mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-08 10:56:15 -08:00
add lazyload
This commit is contained in:
Harvey Zack committed
1 parent
8b6258c4e5
commit
a26afec5ac
4 files changed
+68
-18
No files matched your search
+35
-8
@@ -1054,6 +1054,7 @@
|
||||
|
||||
this.art = art;
|
||||
this.option = option;
|
||||
this.isLoad = false;
|
||||
this.init();
|
||||
}
|
||||
|
||||
@@ -1066,14 +1067,44 @@
|
||||
$progress = _this$art.refs.$progress,
|
||||
proxy = _this$art.events.proxy;
|
||||
proxy($progress, 'mousemove', function (event) {
|
||||
_this.option.ref.style.display = 'block';
|
||||
_this.checkLoad(_this.art.option.thumbnails.url).then(function () {
|
||||
_this.option.ref.style.display = 'block';
|
||||
|
||||
_this.showThumbnails(event);
|
||||
_this.showThumbnails(event);
|
||||
});
|
||||
});
|
||||
proxy($progress, 'mouseout', function () {
|
||||
_this.option.ref.style.display = 'none';
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: "checkLoad",
|
||||
value: function checkLoad(url) {
|
||||
var _this2 = this;
|
||||
|
||||
if (this.isLoad) {
|
||||
return Promise.resolve(url);
|
||||
}
|
||||
|
||||
var proxy = this.art.events.proxy;
|
||||
return new Promise(function (resolve, reject) {
|
||||
var $img = new Image();
|
||||
$img.src = url;
|
||||
|
||||
if ($img.complete) {
|
||||
_this2.isLoad = true;
|
||||
resolve(url);
|
||||
}
|
||||
|
||||
proxy($img, 'load', function () {
|
||||
_this2.isLoad = true;
|
||||
resolve(url);
|
||||
});
|
||||
proxy($img, 'error', function () {
|
||||
reject(url);
|
||||
});
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: "showThumbnails",
|
||||
value: function showThumbnails(event) {
|
||||
@@ -1632,13 +1663,9 @@
|
||||
}
|
||||
|
||||
target.addEventListener(name, callback, option);
|
||||
|
||||
var destroy = function destroy() {
|
||||
this.destroyEvents.push(function () {
|
||||
target.removeEventListener(name, callback, option);
|
||||
};
|
||||
|
||||
this.destroyEvents.push(destroy);
|
||||
return destroy;
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: "destroy",
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArray.js","../../node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/@babel/runtime/helpers/toConsumableArray.js","../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../node_modules/@babel/runtime/helpers/objectSpread.js","../../node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/@babel/runtime/helpers/nonIterableRest.js","../../node_modules/@babel/runtime/helpers/slicedToArray.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../src/utils/ArtPlayerError.js","../../src/utils/index.js","../../src/verification/player.js","../../src/config/mimeCodec.js","../../src/config/mse.js","../../src/config/video.js","../../src/config/index.js","../../node_modules/tiny-emitter/index.js","../../src/template.js","../../src/i18n.js","../../src/player.js","../../src/verification/control.js","../../src/controls/danmu.js","../../src/controls/fullscreen.js","../../src/controls/pip.js","../../src/controls/playAndPause.js","../../src/controls/progress.js","../../src/controls/subtitle.js","../../src/controls/time.js","../../src/controls/volume.js","../../src/controls/setting.js","../../src/controls/thumbnails.js","../../src/controls/index.js","../../src/contextmenu.js","../../src/danmu.js","../../src/info.js","../../src/subtitle.js","../../src/events.js","../../src/hotkey.js","../../src/layers.js","../../src/icons/index.js","../../src/loading.js","../../src/notice.js","../../src/mask.js","../../src/index.js"],"sourcesContent":["function _setPrototypeOf(o, p) {\n module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n\n return _setPrototypeOf(o, p);\n}\n\nmodule.exports = _setPrototypeOf;","var setPrototypeOf = require(\"./setPrototypeOf\");\n\nfunction isNativeReflectConstruct() {\n if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n if (Reflect.construct.sham) return false;\n if (typeof Proxy === \"function\") return true;\n\n try {\n Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));\n return true;\n } catch (e) {\n return false;\n }\n}\n\nfunction _construct(Parent, args, Class) {\n if (isNativeReflectConstruct()) {\n module.exports = _construct = Reflect.construct;\n } else {\n module.exports = _construct = function _construct(Parent, args, Class) {\n var a = [null];\n a.push.apply(a, args);\n var Constructor = Function.bind.apply(Parent, a);\n var instance = new Constructor();\n if (Class) setPrototypeOf(instance, Class.prototype);\n return instance;\n };\n }\n\n return _construct.apply(null, arguments);\n}\n\nmodule.exports = _construct;","function _arrayWithoutHoles(arr) {\n if (Array.isArray(arr)) {\n for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {\n arr2[i] = arr[i];\n }\n\n return arr2;\n }\n}\n\nmodule.exports = _arrayWithoutHoles;","function _iterableToArray(iter) {\n if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === \"[object Arguments]\") return Array.from(iter);\n}\n\nmodule.exports = _iterableToArray;","function _nonIterableSpread() {\n throw new TypeError(\"Invalid attempt to spread non-iterable instance\");\n}\n\nmodule.exports = _nonIterableSpread;","var arrayWithoutHoles = require(\"./arrayWithoutHoles\");\n\nvar iterableToArray = require(\"./iterableToArray\");\n\nvar nonIterableSpread = require(\"./nonIterableSpread\");\n\nfunction _toConsumableArray(arr) {\n return arrayWithoutHoles(arr) || iterableToArray(arr) || nonIterableSpread();\n}\n\nmodule.exports = _toConsumableArray;","function _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}\n\nmodule.exports = _classCallCheck;","function _defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descripLine truncated
|
||||
{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArray.js","../../node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/@babel/runtime/helpers/toConsumableArray.js","../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../node_modules/@babel/runtime/helpers/objectSpread.js","../../node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/@babel/runtime/helpers/nonIterableRest.js","../../node_modules/@babel/runtime/helpers/slicedToArray.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../src/utils/ArtPlayerError.js","../../src/utils/index.js","../../src/verification/player.js","../../src/config/mimeCodec.js","../../src/config/mse.js","../../src/config/video.js","../../src/config/index.js","../../node_modules/tiny-emitter/index.js","../../src/template.js","../../src/i18n.js","../../src/player.js","../../src/verification/control.js","../../src/controls/danmu.js","../../src/controls/fullscreen.js","../../src/controls/pip.js","../../src/controls/playAndPause.js","../../src/controls/progress.js","../../src/controls/subtitle.js","../../src/controls/time.js","../../src/controls/volume.js","../../src/controls/setting.js","../../src/controls/thumbnails.js","../../src/controls/index.js","../../src/contextmenu.js","../../src/danmu.js","../../src/info.js","../../src/subtitle.js","../../src/events.js","../../src/hotkey.js","../../src/layers.js","../../src/icons/index.js","../../src/loading.js","../../src/notice.js","../../src/mask.js","../../src/index.js"],"sourcesContent":["function _setPrototypeOf(o, p) {\n module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n\n return _setPrototypeOf(o, p);\n}\n\nmodule.exports = _setPrototypeOf;","var setPrototypeOf = require(\"./setPrototypeOf\");\n\nfunction isNativeReflectConstruct() {\n if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n if (Reflect.construct.sham) return false;\n if (typeof Proxy === \"function\") return true;\n\n try {\n Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));\n return true;\n } catch (e) {\n return false;\n }\n}\n\nfunction _construct(Parent, args, Class) {\n if (isNativeReflectConstruct()) {\n module.exports = _construct = Reflect.construct;\n } else {\n module.exports = _construct = function _construct(Parent, args, Class) {\n var a = [null];\n a.push.apply(a, args);\n var Constructor = Function.bind.apply(Parent, a);\n var instance = new Constructor();\n if (Class) setPrototypeOf(instance, Class.prototype);\n return instance;\n };\n }\n\n return _construct.apply(null, arguments);\n}\n\nmodule.exports = _construct;","function _arrayWithoutHoles(arr) {\n if (Array.isArray(arr)) {\n for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {\n arr2[i] = arr[i];\n }\n\n return arr2;\n }\n}\n\nmodule.exports = _arrayWithoutHoles;","function _iterableToArray(iter) {\n if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === \"[object Arguments]\") return Array.from(iter);\n}\n\nmodule.exports = _iterableToArray;","function _nonIterableSpread() {\n throw new TypeError(\"Invalid attempt to spread non-iterable instance\");\n}\n\nmodule.exports = _nonIterableSpread;","var arrayWithoutHoles = require(\"./arrayWithoutHoles\");\n\nvar iterableToArray = require(\"./iterableToArray\");\n\nvar nonIterableSpread = require(\"./nonIterableSpread\");\n\nfunction _toConsumableArray(arr) {\n return arrayWithoutHoles(arr) || iterableToArray(arr) || nonIterableSpread();\n}\n\nmodule.exports = _toConsumableArray;","function _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}\n\nmodule.exports = _classCallCheck;","function _defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descripLine truncated
|
||||
@@ -2,6 +2,7 @@ export default class Thumbnails {
|
||||
constructor(art, option) {
|
||||
this.art = art;
|
||||
this.option = option;
|
||||
this.isLoad = false;
|
||||
this.init();
|
||||
}
|
||||
|
||||
@@ -12,8 +13,10 @@ export default class Thumbnails {
|
||||
} = this.art;
|
||||
|
||||
proxy($progress, 'mousemove', event => {
|
||||
this.option.ref.style.display = 'block';
|
||||
this.showThumbnails(event);
|
||||
this.checkLoad(this.art.option.thumbnails.url).then(() => {
|
||||
this.option.ref.style.display = 'block';
|
||||
this.showThumbnails(event);
|
||||
});
|
||||
});
|
||||
|
||||
proxy($progress, 'mouseout', () => {
|
||||
@@ -21,6 +24,30 @@ export default class Thumbnails {
|
||||
});
|
||||
}
|
||||
|
||||
checkLoad(url) {
|
||||
if (this.isLoad) {
|
||||
return Promise.resolve(url);
|
||||
}
|
||||
const { proxy } = this.art.events;
|
||||
return new Promise((resolve, reject) => {
|
||||
const $img = new Image();
|
||||
$img.src = url;
|
||||
if ($img.complete) {
|
||||
this.isLoad = true;
|
||||
resolve(url);
|
||||
}
|
||||
|
||||
proxy($img, 'load', () => {
|
||||
this.isLoad = true;
|
||||
resolve(url);
|
||||
});
|
||||
|
||||
proxy($img, 'error', () => {
|
||||
reject(url);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
showThumbnails(event) {
|
||||
const { $progress } = this.art.refs;
|
||||
const { width: posWidth } = this.getPosFromEvent(event);
|
||||
@@ -29,6 +56,7 @@ export default class Thumbnails {
|
||||
const perIndex = Math.ceil(posWidth / perWidth);
|
||||
let yIndex = Math.ceil(perIndex / column);
|
||||
let xIndex = perIndex % column || column;
|
||||
|
||||
this.option.ref.style.backgroundImage = `url(${url})`;
|
||||
this.option.ref.style.height = `${height}px`;
|
||||
this.option.ref.style.width = `${width}px`;
|
||||
|
||||
+2
-7
@@ -11,14 +11,9 @@ export default class Events {
|
||||
}
|
||||
|
||||
target.addEventListener(name, callback, option);
|
||||
|
||||
const destroy = () => {
|
||||
this.destroyEvents.push(() => {
|
||||
target.removeEventListener(name, callback, option);
|
||||
};
|
||||
|
||||
this.destroyEvents.push(destroy);
|
||||
|
||||
return destroy;
|
||||
});
|
||||
}
|
||||
|
||||
destroy() {
|
||||
|
||||
Reference in new issue
Block a user