@tjoskar/react-lazyload-img
Version:
Lazy image loader for react
48 lines • 2.43 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("react");
const lazyload_1 = require("./lazyload");
class LazyLoad extends react_1.Component {
componentDidMount() {
if (lazyload_1.isNull(this.ref)) {
console.warn('The reference to the image is null, skipping the image');
return;
}
lazyload_1.registerImageToLazyLoad(this.ref, this.props);
}
componentDidUpdate(prevProps) {
if (this.props.image !== prevProps.image && this.ref) {
lazyload_1.registerImageToLazyLoad(this.ref, this.props);
}
}
}
class LazyLoadImage extends LazyLoad {
render() {
const _a = this.props, { style: incomingStyle, height, width, image, errorImage, options, onLoaded, defaultImage: src } = _a, props = __rest(_a, ["style", "height", "width", "image", "errorImage", "options", "onLoaded", "defaultImage"]);
const style = Object.assign(Object.assign({}, incomingStyle), { height,
width });
return react_1.createElement('img', Object.assign(Object.assign({}, props), { ref: el => (this.ref = el), style, src }), this.props.children);
}
}
exports.LazyLoadImage = LazyLoadImage;
class LazyLoadBackgroundImage extends LazyLoad {
render() {
const _a = this.props, { style: incomingStyle, height, width, image, errorImage, options, onLoaded, defaultImage } = _a, props = __rest(_a, ["style", "height", "width", "image", "errorImage", "options", "onLoaded", "defaultImage"]);
const style = Object.assign(Object.assign({}, incomingStyle), { backgroundImage: `url('${defaultImage}')`, height,
width });
return react_1.createElement('div', Object.assign(Object.assign({}, props), { ref: el => (this.ref = el), style }), this.props.children);
}
}
exports.LazyLoadBackgroundImage = LazyLoadBackgroundImage;
//# sourceMappingURL=index.js.map