Watermark 20 images on page load is lock the page.

[eliavmaman]

I have a page with 20-40 images.
When the page is load i'm iterating through all of them and watermark them.
that process is lock the page.
the images are NOT local they are from url
Here is my code

watermark([val, 'image.png'], options)
    // .image(rotate)
      .image(watermark.image.center(0.5))
      .then((imgURL) => {
        let id = 'wmimg_' + Math.floor(Math.random() * 100);
        $(imgURL).attr('id', id);
        $('body').append(imgURL);

        let img = $('body').find('#' + id);
        this.el.src = $(img).attr('src');
        $('#' + id).remove();

      });

Any Ideas?

[eliavmaman]

someone?

[skliffmueller]

Watermarking is typically a measure for copyright protection on an image. If the original source image is being loaded on client side, then watermarked, you are still exposing the original image to the client without the watermark. So if you are attempting to protect copyrights, I would highly suggest watermarking the image on the server side, or your local environment, then uploading the resulting watermarked image to your CDN.

If having the original image exposed to the client is not an issue, and you want to put heavy load on every single client that would like to load your webpage, and killing mobile users batteries, and have load times of your webpage be absolute crap, then I would suggest processing each image synchronously. Make a queue list of every image that needs to be processed, like an array of strings with the path to each image, and itterating them one by one. Process one, on complete, process the next, and so on. There are libraries like async eachSeries that does just this https://caolan.github.io/async/v3/

But client side processing for your case is a really bad idea. The intent behind watermarkjs is to watermark images upon upload to a CDN, which then the CDN would serve the watermark image.