Set-Img-Src

Github

Table of contents

• Set-Img-Src
  • Github
  • Table of contents
  • General info
  • Technologies
  • Setup
  • Documentation
  • All Exports

General info

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.

Technologies

Project is created with:

• Typescript version: 4.6

Setup

To run this project, install it locally using npm:

$ npm install set-img-src

Documentation

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!');
    })
}

All Exports

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