diff --git a/src/image/imageloadobserver.js b/src/image/imageloadobserver.js index 295eaa6c..57d7fd62 100644 --- a/src/image/imageloadobserver.js +++ b/src/image/imageloadobserver.js @@ -20,65 +20,18 @@ import Observer from '@ckeditor/ckeditor5-engine/src/view/observer/observer'; * @extends module:engine/view/observer/observer~Observer */ export default class ImageLoadObserver extends Observer { - constructor( view ) { - super( view ); - - /** - * List of img DOM elements that are observed by this observer. - * - * @private - * @type {Set.} - */ - this._observedElements = new Set(); - } - /** * @inheritDoc */ - observe( domRoot, name ) { - const viewRoot = this.document.getRoot( name ); - - // When there is a change in one of the view element - // we need to check if there are any new `` elements to observe. - viewRoot.on( 'change:children', ( evt, node ) => { - // Wait for the render to be sure that `` elements are rendered in the DOM root. - this.view.once( 'render', () => this._updateObservedElements( domRoot, node ) ); - } ); - } - - /** - * Updates the list of observed `` elements. - * - * @private - * @param {HTMLElement} domRoot DOM root element. - * @param {module:engine/view/element~Element} viewNode View element where children have changed. - */ - _updateObservedElements( domRoot, viewNode ) { - if ( !viewNode.is( 'element' ) || viewNode.is( 'attributeElement' ) ) { - return; - } - - const domNode = this.view.domConverter.mapViewToDom( viewNode ); + observe( domRoot ) { + this.listenTo( domRoot, 'load', ( event, domEvent ) => { + const domElement = domEvent.target; - // If there is no `domNode` it means that it was removed from the DOM in the meanwhile. - if ( !domNode ) { - return; - } - - for ( const domElement of domNode.querySelectorAll( 'img' ) ) { - if ( !this._observedElements.has( domElement ) ) { - this.listenTo( domElement, 'load', ( evt, domEvt ) => this._fireEvents( domEvt ) ); - this._observedElements.add( domElement ); - } - } - - // Clean up the list of observed elements from elements that has been removed from the root. - for ( const domElement of this._observedElements ) { - if ( !domRoot.contains( domElement ) ) { - this.stopListening( domElement ); - this._observedElements.delete( domElement ); + if ( domElement.tagName == 'IMG' ) { + this._fireEvents( domEvent ); } - } + // Use capture phase for better performance (#4504). + }, { useCapture: true } ); } /** @@ -95,14 +48,6 @@ export default class ImageLoadObserver extends Observer { this.document.fire( 'imageLoaded', domEvent ); } } - - /** - * @inheritDoc - */ - destroy() { - this._observedElements.clear(); - super.destroy(); - } } /**