We are handling windows resize event and are updating/rendering crop widget when resize event is happening.

Depending on the browser resize events can be fired a lot of times while user change window dimension and we are doing not trivial stuff for cropper per each event.

Should we apply throttling or debouncing optimizations (http://bencentra.com/code/2015/02/27/optimizing-window-resize.html) to execute less crop widget updates while browser is resizing or this is not important for our use case?

Comments

pivica created an issue. See original summary.

slashrsm’s picture

Issue tags: +Media Initiative, +D8Media

This indeed sounds like a very good frontend performance improvement.

woprrr’s picture

Priority: Normal » Major
Status: Active » Needs work

I think this idea is an very good idea !!! this issue sound very good and goes in the direction of #2660788 and improve a lot the frontend performance.

woprrr’s picture

Priority: Major » Normal
pivica’s picture

Oh just figure it out that Drupal core JS already have debounce implementation which we should use for this, check core/misc/debounce.js, method Drupal.debounce().

woprrr’s picture

@pivica you have a small time to view it or take you directive to advance that subject ?

pivica’s picture

yes and if not i will make a time ;)

i will try today evening to start with this and other one - de-bouncing related.

pivica’s picture

Oh damn 7 months already passed... where???

@woprrr check core/misc/debounce.js - this is the library we should use. There are many examples in Drupal core how to use it, for example core/modules/outside_in/js/offcanvas.js

For example something like this we need. Instead of

// Handling cropping when viewport resizes.
$(window).resize(function () {
  $(detailsParentSelector).each(function () {
    // Find only opened widgets.
    // ...
  });
});

Do something like this

var croppingResize = function () {
  $(detailsParentSelector).each(function () {
    // Find only opened widgets.
    // ...
  });
};

// Handling cropping when viewport resizes.
$(window).resize(function () {
  debounce(croppingResize, 250)
});

This basically says when window resize event is happening fire croppingResize function on each 250ms while resize events is going on.

markhalliwell’s picture

Status: Needs work » Closed (duplicate)
Related issues: +#2803407: Refactor form element and JS to work with any theme

This was fixed by this related issue.