javascript - How to filter images of specific size with jQuery? -
i'm trying find images larger specific size in html page, following code not work correctly:
function findimages(url) { $.ajax({ url: url, datatype: "html", success: function (data) { var html = $.parsehtml( data ), imgs = $(html).find("img").filter(function() { return ($(this).width() > 50) && ($(this).height() > 50) }); len = imgs.length; if( len > 0 ){ $.each(imgs, function(index, img) { console.log(img.width); }); } else { console.log("image not found"); } }, }); }; i expect filter part return images width , height larger 50, not seem work me. doing wrong here?
suppose html response
var imageshtml = [ '<img src="http://" width="100" height="500">', '<img src="http://" width="100" height="500">', '<img src="http://" width="50" height="500">', '<img src="http://" width="50" height="50">', '<img src="http://" width="100" height="50">', '<img src="http://" width="50" height="50" style="width: 100px">' ]; var html = $(images.join('')); #1 - filter html attributes
var imgs = html.find("img").filter(function() { return ($(this).attr('width') > 50) && ($(this).attr('height') > 50); }); // push dom #2 filter width (inline styles)
var doc = document.createdocumentfragment(), div = document.createelement('div'); var imgs = $(div).html(html).find('img').filter(function () { return ($(this).width() > 50) && ($(this).height() > 50) }); // push dom #3 - example - if width , height attributes have not been setted images
function loadimages(content, callback) { var html = $(content), urls = []; function filter(width, height) { return (width > 256 && height > 256); } function load(el) { var def = new $.deferred(), img = new image(); img.onload = function () { if (filter(img.width, img.height)) { return def.resolve(el.get(0)); } def.resolve(null); }; img.onerror = function () { def.resolve(); }; img.src = el.attr('src'); return def; } urls = $('<div />').html(html).find('img').map(function () { return load($(this)); }).get(); $.when.apply(null, urls).done(function () { callback.call(this, [].slice.call(arguments, 0).filter(boolean)); }); } loadimages(images.join(''), function (images) { var content = $('<div />'); images.foreach(function (el) { content.append(el); }); $('body').html(content.get(0)); }); in opinion better send json contain images (urls) :), because creating unnecessary http queries it's not solution.
Comments
Post a Comment