Ленивая загрузка изображений с JavaScript-фреймворком Igaro App

 module.requires = [ { name:'instance.unveil.css' } ]; module.exports = function(app) { "use strict"; var bless = app['core.object'].bless; var InstanceUnveil = function(o) { var self = this; this.name='instance.unveil'; this.asRoot=true; this.container=function(domMgr) { return domMgr.mk('div',o,null,function() { if (o.className) this.className = o.className; this.style.width = o.width; this.style.height = o.height; }); }; bless.call(this,o); this.onUnveil = o.onUnveil; this.xhrConf = o.xhrConf; this.loadImg = o.loadImg; }; return InstanceUnveil; }; 

Атрибуты, предоставляемые аргументом o могут использоваться напрямую, например, o.container и o.className (которые указывают, куда должен быть вставлен виджет, и предлагают имя пользовательского класса). Некоторые написаны напрямую, например, имя объекта, которое используется менеджером событий, предоставляемым функцией благословения Игаро. Bless может предоставить много вещей, например, если виджету требуется постоянное хранение данных, мы можем попросить его присоединить менеджер магазина ( см. Пример кода http: // localhost: 3006 / showcase / todomvc ).

Добавить обработчики событий окна

Обновите файл instance.unveil.js включив в него обработчики оконного прослушивателя, функцию очистки и основные методы-прототипы, как показано ниже. Вы можете заменить предыдущее содержимое файла с кодом ниже, если вы предпочитаете это сделать.

 module.requires = [ { name:'instance.unveil.css' } ]; module.exports = function(app) { "use strict"; var bless = app['core.object'].bless; var removeWindowListeners = function() { var wh = this.__windowHook; if (wh) { window.removeEventListener('scroll',wh); window.removeEventListener('resize',wh); } this.__windowHook = null; }; var InstanceUnveil = function(o) { var self = this; this.name='instance.unveil'; this.asRoot=true; this.container=function(domMgr) { return domMgr.mk('div',o,null,function() { if (o.className) this.className = o.className; this.style.width = o.width; this.style.height = o.height; }); }; bless.call(this,o); this.onUnveil = o.onUnveil; this.xhrConf = o.xhrConf; this.loadImg = o.loadImg; this.__windowHook = function() { return self.check(o); }; window.addEventListener('scroll', this.__windowHook); window.addEventListener('resize', this.__windowHook); this.managers.event.on('destroy', removeWindowListeners.bind(this)); }; InstanceUnveil.prototype.init = function(o) { return this.check(o); }; InstanceUnveil.prototype.check = function(o) { return Promise.resolve(); }; return InstanceUnveil; }; 

Экземпляр теперь присоединяет слушателей к scroll окна и resize событий, что вызовет функцию check (которая выполнит вычисление, чтобы увидеть, находится ли наш виджет в пространстве области просмотра). Критически, он также присоединяет другого слушателя к менеджеру событий в экземпляре, чтобы удалить слушателей, если экземпляр уничтожен. Также есть новая прототипная функция с именем init . Инстанцирование JavaScript с помощью new ключевого слова является синхронным, но вместо этого асинхронный код можно поместить в init и он будет называться для нас.

В приложении Igaro любой благословенный объект можно уничтожить, вызвав на нем команду destroy .

На данный момент код по-прежнему ничего не делает. Если вы /unveiltest к /unveiltest , вам будет предоставлена ​​пустая страница (но проверьте содержимое, и вы увидите пятьдесят пустых элементов <div> ). Тяжелый подъем еще не добавлен к функции check .

Функция проверки

Эта функция должна делать следующее:

• Определить, находится ли контейнер экземпляра (элемент <div> ) в области просмотра
• Добавить loading класс CSS
• Создать экземпляр XHR
• Получить ресурс
• Если вы загружаете изображение, поменяйте <div> на <img>
• При желании позвонить
• Удалить loading класс CSS
• Очистить обработчики событий

Для функции check достаточно много кода, но не торопитесь и выполняйте ее — она ​​хорошо читается. Добавьте его в свой файл, и не забудьте ссылку на модуль dom в верхней части.

 //# sourceURL=instance.unveil.js module.requires = [ { name:'instance.unveil.css' } ]; module.exports = function(app) { "use strict"; var bless = app['core.object'].bless, dom = app['core.dom']; var removeWindowListeners = function() { var wh = this.__windowHook; if (wh) { window.removeEventListener('scroll',wh); window.removeEventListener('resize',wh); } this.__windowHook = null; }; var InstanceUnveil = function(o) { var self = this; this.name='instance.unveil'; this.asRoot=true; this.container=function(domMgr) { return domMgr.mk('div',o,null,function() { if (o.className) this.className = o.className; this.style.width = o.width; this.style.height = o.height; }); }; bless.call(this,o); this.onUnveil = o.onUnveil; this.xhrConf = o.xhrConf; this.loadImg = o.loadImg; this.__windowHook = function() { return self.check(o); }; window.addEventListener('scroll', this.__windowHook); window.addEventListener('resize', this.__windowHook); this.managers.event.on('destroy', removeWindowListeners.bind(this)); }; InstanceUnveil.prototype.init = function(o) { return this.check(o); }; InstanceUnveil.prototype.check = function() { var container = this.container; // if not visible to the user, return if (! this.__windowHook || dom.isHidden(container) || dom.offset(container).y > (document.body.scrollTop || document.documentElement.scrollTop) + document.documentElement.clientHeight) return Promise.resolve(); var self = this, managers = this.managers, xhrConf = this.xhrConf; removeWindowListeners.call(this); container.classList.add('instance-unveil-loading'); return Promise.resolve().then(function() { if (xhrConf) { return managers.object.create('xhr', xhrConf).then(function(xhr) { return xhr.get(self.loadImg? { responseType: 'blob' } : {}).then(function(data) { if (self.loadImg) { self.container = managers.dom.mk('img',{ insertBefore:container }, null, function() { var img = this, windowURL = window.URL; // gc this.addEventListener('load',function() { windowURL.revokeObjectURL(img.src); }); this.src = windowURL.createObjectURL(data); this.className = container.className; this.style.height = container.style.height; this.style.width = container.style.width; }); dom.purge(container); container = self.container; } return data; }).then(function(data) { if (self.onUnveil) return self.onUnveil(self,data); }).then(function() { return xhr.destroy(); }); }); } if (self.onUnveil) return self.onUnveil(self); }).catch(function(e) { container.classList.add('instance-unveil-error'); container.classList.remove('instance-unveil-loading'); throw e; }).then(function() { container.classList.remove('instance-unveil-loading'); }); }; return InstanceUnveil; }; 

Зачем нам нужно было добавлять модуль core.dom когда у нашего благословенного объекта есть DOM-менеджер, который вы можете спросить?

Bless предоставляет только те функции, которые требуют настройки для благословляемого объекта, поэтому менеджер DOM не предоставляет метод purge необходимый для уничтожения исходного контейнера (и всех его зависимостей). По этой причине следующие два метода для создания элемента DOM не совпадают:

 app['core.dom'].mk(...) [blessed object].managers.dom.mk(...) 

Во втором примере уничтожается элемент DOM в случае уничтожения благословенного объекта, а также любые события, для которых элемент DOM зарегистрирован как зависимость. Он автоматизирует всю очистку и гарантирует отсутствие утечек памяти.

Обновите и на странице должно быть много красочных изображений.

Провал!

Как вы, надеюсь, узнали, у нас совсем немного изображений. Можете ли вы решить, что пошло не так?

Две вещи;

 app['core.router'].managers.event.on('to-in-progress',function(r) { if (r === route) unveil.check(); // no return }, { deps:[theInstance] }); 

 //# sourceURL=route.main.unveiltest.js module.requires = [ { name: 'route.main.unveiltest.css' }, ]; module.exports = function(app) { "use strict"; var coreRouterMgrsEvent = app['core.router'].managers.event; return function(route) { var wrapper = route.wrapper, objectMgr = route.managers.object; return route.addSequence({ container:wrapper, promises:Array.apply(0,new Array(50)).map(function(a,i) { return objectMgr.create( 'unveil', { xhrConf : { res:'http://www.igaro.com/misc/sitepoint-unveildemo/'+i+'.jpeg' }, loadImg : true, width:'420px', height:'240px' } ).then(function(unveil) { coreRouterMgrsEvent.on('to-in-progress',function(r) { if (r === route) unveil.check(); // no return }, { deps:[unveil] }); return unveil; }); }) }); }; }; 

 if (! window.URL)) throw new Error({ incompatible:true, noobject:'window.URL' });