CMS update image issue #139
Description
The preview update when editing a CMS page is causing a massive performance issue in the browser. When the image:renderAfter event is triggered, it loops through all images and makes a new ajax request for each one.
This behavior is manageable for a small number of images, but it quickly scales out of control. For example:
- When the first image loads, it triggers one AJAX call to cloudinary/ajax/updateadminimage.
- When the second image loads, the function loops through both images, triggering two AJAX calls.
- By the tenth image, it’s making ten AJAX calls.
Because of this exponential growth in requests, page performance degrades rapidly as the number of images increases. The expected behavior is for the update to only target the image that triggered the event.
Updating the vendor/cloudinary/cloudinary-magento2/view/adminhtml/web/js/cms/preview-update.js file fixes this performance issue (See full code below)
Full code change
define(
['jquery','Magento_PageBuilder/js/events'],
function ($,_PBEvents) {
'use strict';
return function (config, element) {
let updateHandler = {
images: {},
init: function () {
let self = this;
_PBEvents.on('image:renderAfter', function (event) {
let elem = event.element, key = event.id;
let image = $(elem).find('img');
self.images[key] = {
key: key,
remote_image: image.attr('src')
};
self.update(key);
});
$('#save-button').on('click', function () {
$.each(self.images, function (key, elem) {
if (elem.cld_image) {
let img = $('img[src="' + elem.cld_image +'"]');
if (img.length) {
img.attr('src', elem.remote_image);
}
}
});
});
},
update: function (key) {
let self = this;
let imageData = self.images[key];
if (!imageData) {
return;
}
$.ajax({
url: config.ajaxUrl,
type: 'POST',
dataType: 'json',
data: { remote_image: imageData.remote_image },
success: function (image) {
self.images[key].cld_image = image;
let img = $('img[src="' + imageData.remote_image +'"]');
if (img.length) {
img.attr('src', image);
}
},
error: function (xhr, textStatus, errorThrown) {
console.log('Error:', textStatus, errorThrown);
}
});
}
};
return updateHandler.init();
};
});