Last active
January 6, 2017 18:45
-
-
Save 1fabiopereira/d63f6567347c972526b2bf091e54f319 to your computer and use it in GitHub Desktop.
Carregamento preguiçoso usando web worker - https://github.com/mattslocum/ng-webworker
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function () { | |
'use strict'; | |
angular.module('clusbe.diretiva.lazy', []) | |
.directive('lazy', [ | |
'$http', | |
'$timeout', | |
'Webworker', | |
'CONSTANT_RESOURCES_URL_IMG', | |
'CONSTANT_BASE_URL', | |
'$window', | |
function ($http, | |
$timeout, | |
Webworker, | |
CONSTANT_RESOURCES_URL_IMG, | |
CONSTANT_BASE_URL, | |
$window) { | |
// Função que faz a resolução de um recurso | |
// params uri | |
function workerMock(url, data) { | |
var xmlhttp = new XMLHttpRequest(); | |
xmlhttp.onreadystatechange = function () { | |
if (this.readyState == 4 && this.status == 200) { | |
complete(this.response); | |
} else { | |
notify(this.status); | |
} | |
}; | |
if (data) { | |
xmlhttp.open("POST", url, true); | |
xmlhttp.setRequestHeader("Content-type", "application/json"); | |
xmlhttp.send(JSON.stringify(data)); | |
} else { | |
xmlhttp.open("GET", url, true); | |
xmlhttp.send(); | |
} | |
} | |
// Função que executa o worker de resolução de uma url | |
// Tarefa executado em paralelo - Multithread | |
function _exec(worker, url, callback) { | |
worker.run(url).then(function (response) { | |
callback(null, response); | |
}, function (err) { | |
callback(err, null); | |
}); | |
} | |
// Função de link para a renderização da view | |
var _link = function (scope, element, atrrs) { | |
var tagName = element.prop('tagName'); | |
tagName === 'IMG' ? element.prop('src', 'img/loading_spinner.svg') : element.css({'background-image': 'url(img/loading_spinner.svg)'}); | |
var WorkerHttpThead = Webworker.create(workerMock, {async: true}); | |
var _callback = function (err, response) { | |
if (err) element.prop('src', 'img/reload.svg'); | |
try { | |
response = JSON.parse(response); | |
} catch (e) { | |
} | |
var tempUrl = response && response.url; | |
try { | |
if (tempUrl) { | |
if (tempUrl.indexOf('images/cache') !== -1) tempUrl = CONSTANT_RESOURCES_URL_IMG + response.url.replace('images/cache', 'images'); | |
else if (tempUrl.indexOf('images/data') !== -1) tempUrl = CONSTANT_RESOURCES_URL_IMG + response.url.replace('images/data', 'image'); | |
else tempUrl = CONSTANT_RESOURCES_URL_IMG + tempUrl; | |
} else { | |
tempUrl = (atrrs.lazy.match(/perfil/) ? 'img/avatar.svg' : 'img/reload.svg'); | |
} | |
} catch (e) { | |
} | |
var image = new Image(); | |
image.src = tempUrl; | |
image.onload = function (event) { | |
tagName === 'IMG' ? element.prop('src', tempUrl) : element.css({'background-image': 'url(' + tempUrl + ')'}); | |
}; | |
image.onerror = function (event) { | |
var img = (atrrs.lazy.match(/perfil/) ? 'img/avatar.svg' : 'img/reload.svg'); | |
tagName === 'IMG' ? element.prop('src', img) : element.css({'background-image': 'url(' + img + ')'}); | |
} | |
}; | |
// Fica observando alterações que ocorrem na view | |
atrrs.$observe('lazy', function () { | |
var regex_a = atrrs.lazy ? atrrs.lazy.match(/\B[\//\//]/) : undefined; | |
var regex_b = atrrs.lazy ? atrrs.lazy.match(/\b[\//]+$/) : undefined; | |
if (!regex_a && !regex_b) { | |
if (atrrs.lazy.indexOf('videos/data') !== -1) _callback(null, {url: (atrrs.lazy.replace('videos/data', 'videos')).replace('mp4', 'png')}); | |
else _exec(WorkerHttpThead, CONSTANT_BASE_URL + atrrs.lazy + (atrrs.lazy.match(/post/) ? ("/" + $window.innerWidth) : ''), _callback); | |
} | |
}); | |
}; | |
return { | |
strict: 'A', | |
link: _link | |
} | |
}]); | |
})(); | |
// ------------ Este é o erro que estou obtendo: --------------- | |
/* | |
Uncaught ReferenceError: notify is not defined | |
at XMLHttpRequest.xmlhttp.onreadystatechange (3a936af9-bb74-4043-ab69-0c01ddb94c37:7) | |
at workerMock (3a936af9-bb74-4043-ab69-0c01ddb94c37:17) | |
at onmessage (3a936af9-bb74-4043-ab69-0c01ddb94c37:20) | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment