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; }