Set-img-src is aimed at solving a browser bug where changing the src attribute of an image between dataURLs or base64-strings causes RAM spikes. The bug has been marked as fixed in Chromium however people have reported it despite that and I myself recently encountered it as well. Essentially all this project does is taking this solution of using cloneNode, adding a parameter for moving eventListeners as well, and then putting it in a package so it can be easily moved between projects.
Project is created with:
- Typescript version: 4.6
To run this project, install it locally using npm:
$ npm install set-img-src
Set-img-src's default export is a class with static functions for setting src by Id or Element. The passed value can be either formatted as a base64-string or a dataUrl.
import ImgSrcHandler from 'set-img-src'
...
function ById(id: string, value: string) {
ImgSrcHandler.setSrcById(id, value);
}
function byElement(id: string, value: string) {
element = document.getElementById(id);
ImgSrcHandler.setSrcByElement(element, value);
}If your element has event listeners attached to it you will have to pass these through the 'eventProperties' parameter as Node.cloneNode does not copy them automatically.
import ImgSrcHandler from 'set-img-src'
...
function setWithEvents(id: string, value: string) {
ImgSrcHandler.setSrcById(id, value, {Event: 'click', Listener: handleClick});
}There is also a class with static async functions that returns promises if that is more to your liking.
import {ImgSrcAsyncHandler} from 'set-img-src'
...
function asyncById(id: string, value: string) {
ImgSrcAsyncHandler.setSrcById(id, value).then(() => {
console.log('Completed!')
})
}You can also import functions one by one,
import {setSrcById, removeSrcById} from 'set-img-src'
...
function ById(id: string, value: string) {
setSrcById(id, string);
}
function remove(id) {
removeSrcById(id);
}Which also goes for async functions.
import {setSrcByIdAsync} from 'set-img-src'
...
function asyncById(id: string, value: string) {
setSrcByIdAsync(id, string).then(() => {
console.log('Completed!');
})
}default class ImgSrcHandler {
static setSrcById(id: string, value: string, eventProperties?: EventProperty[]): void;
static removeSrcById(id: string, eventProperties?: EventProperty[]): void;
static setSrcByElement(image: HTMLImageElement, value: string, eventProperties?: EventProperty[]): void;
static removeSrcByElement(image: HTMLImageElement, eventProperties?: EventProperty[]): void;
}
class ImgSrcAsyncHandler {
static setSrcById(id: string, value: string, eventProperties?: EventProperty[]): Promise<void>;
static removeSrcById(id: string, eventProperties?: EventProperty[]): Promise<void>;
static setSrcByElement(image: HTMLImageElement, value: string, eventProperties?: EventProperty[]): Promise<void>;
static removeSrcByElement(image: HTMLImageElement, eventProperties?: EventProperty[]): Promise<void>;
}
function setSrcById(id: string, value: string, eventProperties?: EventProperty[]): void;
function removeSrcById(id: string, eventProperties?: EventProperty[]): void;
function setSrcByElement(image: HTMLImageElement, value: string, eventProperties?: EventProperty[]): void;
function removeSrcByElement(image: HTMLImageElement, eventProperties?: EventProperty[]): void;
function setSrcByIdAsync(id: string, value: string, eventProperties?: EventProperty[]): Promise<void>;
function removeSrcByIdAsync(id: string, eventProperties?: EventProperty[]): Promise<void>;
function setSrcByElementAsync(image: HTMLImageElement, value: string, eventProperties?: EventProperty[]): Promise<void>;
function removeSrcByElementAsync(image: HTMLImageElement, eventProperties?: EventProperty[]): Promise<void>;
interface EventProperty {
Event: string;
Listener: EventListenerOrEventListenerObject;
Options?: boolean | AddEventListenerOptions | undefined;
}