我通过图像试图回路HTML块“GET”,让每个图像的原始宽度。我有完美的DOM构建,我在NPM上使用图像大小模块来检索图像宽度。同步在Node.js的
问题是,它需要时间来获取图像,并得到他们的宽度,因此代码将继续进行处理我已经得到了宽度回来。因此,我无法调整HTML块中的宽度,因为函数在获取第一个图像之前运行并完成。
无论如何以停止从处理代码,直到此GET
请求完成?我不希望For-Loop继续到图像完成。
var elem_tags = doc.getElementsByTagName("img");
var elem_tags_length = elem_tags.length;
for (var i=0; i < elem_tags_length; i++) {
var imgUrl = options.elem_tags[i].getAttribute('src');
http.get(imgUrl, function (response) {
// My Code To Manipulate <img> tags
var chunks = [];
response.on('data', function (chunk) {
chunks.push(chunk);
}).on('end', function() {
var buffer = Buffer.concat(chunks);
console.log(imgSize(buffer).width); // imgSize is a module from NPM. Disregard for our loop purposes.
});
});
}
我的完整代码参考:
var url = require('/usr/lib/node_modules/url');
var http = require('http');
var https = require('https');
var jsdom = require("/usr/lib/node_modules/jsdom").jsdom;
var imgSize = require('/usr/lib/node_modules/image-size/');
var myhtml = '<img src="http://xdesktopwallpapers.com/wp-content/uploads/2011/11-1/Searching-For-Something.jpg" /> <div style="width:500px;border:2px;" id="mytestdiv"><p style="margin:40px;">Harry Potter <img src="https://sites01.lsu.edu/wp/lsupd/files/2011/01/poster1.jpg" style="width:900px" /> and <img width="999" src="http://xdesktopwallpapers.com/wp-content/uploads/2011/11-1/Searching-For-Something.jpg" /> and <img style="width:190px" width="190" src="http://xdesktopwallpapers.com/wp-content/uploads/2011/11-1/Searching-For-Something.jpg" /></p></div>';
function getImage(imgUrl) {
console.log('image loop');
return new Promise(function(resolve, reject) {
http.get(imgUrl, function(err, result) {
if (err) return reject(err);
return resolve(result);
});
});
}
var doc = jsdom(myhtml);
var doc = doc.parentWindow.document;
var elem_tags = doc.getElementsByTagName("img");
var elem_tags_length = elem_tags.length;
var promises = [];
for (var i=0; i < elem_tags_length; i++) {
var imgUrl = elem_tags[i].getAttribute('src');
var promise = getImage(imgUrl).then(function(response) {
// My Code To Manipulate <img> tags .... return promise if async
});
promises.push(promise);
}
Promise.all(promises).then(function() {
console.log('done');
});
由于目前还不清楚是什么'getProtocolVar.get()'方法返回,即承诺或没有,回调里面一个简单的计数器,并检查计数器'== = elem_tags_length'知道所有图像加载是一个选项 – adeneo
同步代码不是代码nodejs的方式,学会使用回调和承诺。 –
您可以使用'async.js'来管理回调和链接。 https://github.com/caolan/async –