Closed asilvas closed 9 years ago
Usage:
curl(['img!img1.png', 'img!img2.png'], function(img1, img2) {
console.log("IMG1: " + img1.originalWidth+ "x" + img1.originalHeight);
console.log("IMG2: " + img2.originalWidth+ "x" + img2.originalHeight);
document.body.appendChild(img1);
document.body.appendChild(img2);
});
{Image}.dom reflects the dom element. The abstraction is provided to account for all browsers so dimensions are known without having to add to the DOM first (since it is handled by the plugin).
Hey Arron, this looks great! Very compact.
One option would be to extend the extend the DOM element to avoid having to use the abstraction. So I would rename width and height to something like originalWidth, originalHeight.
Thoughts?
Changes committed. Should take care of the concerns. Updated the usage above as well to reflect the changes.
Sorry Aaron, we're still trying to figure out what to do with contributed plugins. -- John
@unscriptable Could you please decide what to do with this plugin. May I use it in production?
img.style.display = ""; // must show before calculating dimensions
Will it cause FOUC?
@szepeviktor a few lines down, the image is removed from the DOM. The browser never has a chance to repaint the screen. It's possible that in old IE, this code causes a reflow (a potential perf issue), but I haven't tested for that.
Hey @szepeviktor, would you be interested in hosting this plugin and publishing it to bower? I've been thinking of moving all (or some of the less common) of the plugins to separate repos.
OK. Which of them are you thinking of?
Should it be a https://github.com/szepeviktor/curl-plugins repo?
I was thinking https://github.com/szepeviktor/curl-img-plugin with a corresponding curl-img-plugin entry in bower. Sound cool? Perhaps a link from the curl README?
@szepeviktor here's an example of a curl shim in a separate repo: https://github.com/unscriptable/curl-cache-bust
Thanks for the nice work, it's a very good to have feature. What is the status for this pull request? Hope it will be ready to use on production soon
Tested in IE6-10, latest FF/Chrome, and Safari.