Using the following code, I get the size of an image:
function getFileSize(img) {
GM_xmlhttpRequest({
url: img.src,
method: "HEAD",
onload: function(response) {
response.responseHeaders.match(/Content-Length: (\d+)/);
size = RegExp.$1;
if (size > maxS)
// If size > max. allowed size
markImage(img);
else if (img.height > maxH)
// If img.height > max. allowed height
markImage(img);
}
});
}
As you can see, the function above calls markImage:
function markImage(img) {
img.style.border = "7px solid #990099";
showDialog(); // This function shows a dialog
}
So I want to change the style of those images matching certain conditions.
If an image matches the conditions on getFileSize, the dialog which is called on markImage is correctly shown. However, style is not always changed.
As far as I have been able to see, the script works perfectly when size > maxS, but it doesn’t always work when img.height > maxH. Actually, if img.height > maxH, the script works if I refresh the website but it doesn’t at the first try.
On the one hand, considering the fact that markImage is called onload, this doesn’t seem to be an issue related to synchronization. In addition, the dialog is correctly shown when it has to be shown. On the other hand, I also tried to change the style by using setAttribute but it makes no difference. So I have no idea why is this “randomly” failing.
Thanks in advance for your help.
Okay, if
showDialog();always fires correctly, then that rules out image loading and rendering delays.Some other things that could be causing the glitch:
Some other CSS is overriding the CSS in
markImage(). Change the code to:The page has JS that modifies or reloads the target image… Intercept, block, or cleanup after such JS as appropriate.
If
showDialog();does not always fire correctly, that’s a different ballgame, but you indicated that this was not the case.If something else is going on, we can’t tell without seeing the target page and maybe the whole GM script. Link to those.