8
0

imageloadobserver.js 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /**
  6. * @module image/image/imageloadobserver
  7. */
  8. import Observer from '@ckeditor/ckeditor5-engine/src/view/observer/observer';
  9. /**
  10. * Observes all new images added to the {@link module:engine/view/document~Document},
  11. * fires {@link module:engine/view/document~Document#event:imageLoaded} and
  12. * {@link module:engine/view/document~Document#event:layoutChanged} event every time when the new image
  13. * has been loaded.
  14. *
  15. * **Note:** This event is not fired for images that has been added to the document and rendered as `complete` (already loaded).
  16. *
  17. * @extends module:engine/view/observer/observer~Observer
  18. */
  19. export default class ImageLoadObserver extends Observer {
  20. /**
  21. * @inheritDoc
  22. */
  23. observe( domRoot ) {
  24. this.listenTo( domRoot, 'load', ( event, domEvent ) => {
  25. const domElement = domEvent.target;
  26. if ( domElement.tagName == 'IMG' ) {
  27. this._fireEvents( domEvent );
  28. }
  29. // Use capture phase for better performance (#4504).
  30. }, { useCapture: true } );
  31. }
  32. /**
  33. * Fires {@link module:engine/view/document~Document#event:layoutChanged} and
  34. * {@link module:engine/view/document~Document#event:imageLoaded}
  35. * if observer {@link #isEnabled is enabled}.
  36. *
  37. * @protected
  38. * @param {Event} domEvent The DOM event.
  39. */
  40. _fireEvents( domEvent ) {
  41. if ( this.isEnabled ) {
  42. this.document.fire( 'layoutChanged' );
  43. this.document.fire( 'imageLoaded', domEvent );
  44. }
  45. }
  46. }
  47. /**
  48. * Fired when an <img/> DOM element has been loaded in the DOM root.
  49. *
  50. * Introduced by {@link module:image/image/imageloadobserver~ImageLoadObserver}.
  51. *
  52. * @see module:image/image/imageloadobserver~ImageLoadObserver
  53. * @event module:engine/view/document~Document#event:imageLoaded
  54. * @param {module:engine/view/observer/domeventdata~DomEventData} data Event data.
  55. */