{"id":802,"date":"2013-06-04T14:21:58","date_gmt":"2013-06-04T14:21:58","guid":{"rendered":"http:\/\/blog.corbdesign.com\/?p=802"},"modified":"2013-06-04T14:21:58","modified_gmt":"2013-06-04T14:21:58","slug":"broken-images","status":"publish","type":"post","link":"https:\/\/corbinrose.com\/blog\/technology\/broken-images\/","title":{"rendered":"Find and hide broken images in js"},"content":{"rendered":"\n<p>Ever run into the issue where dynamic content loads on a page and occasionally contains a broken image icon (and a 404 on the get request for the image)? Well, I have&#8230;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"http:\/\/blog.corbdesign.com\/wp-content\/uploads\/2013\/06\/broken.jpg\"><img decoding=\"async\" src=\"http:\/\/blog.corbdesign.com\/wp-content\/uploads\/2013\/06\/broken-150x150.jpg\" alt=\"\" class=\"wp-image-803\" title=\"broken\"\/><\/a><\/figure>\n\n\n\n<p>So here&#8217;s my plan:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">function isImageOk(img) {\n\n\tif (!img.complete) {\n\t\treturn false;\n\t}\n\n\tif (typeof img.naturalWidth != \"undefined\" &amp;&amp; img.naturalWidth == 0) {\n\t\treturn false;\n\t}\n\n\treturn true;\n}<\/pre>\n\n\n\n<p>Then you can bind this to the window and search for all img tags:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">addEvent(window, \"load\", function() {\n\tfor (var i = 0; i &lt; document.images.length; i++) {\n\t\tif (!isImageOk(document.images[i])) {\n\t\tdocument.images[i].style.visibility = \"hidden\";\n\t\t}\n\t}\n});<\/pre>\n\n\n\n<p>Or if you&#8217;re using jquery:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$(document).ready(function(){\n\t$(\".img\").each(function(index, elem){\n\tif (!isImageOk(elem)) {\n\t\t$(elem).css(\"visibility\", \"hidden\");\n\t}\n\t});\n});<\/pre>\n\n\n\n<p>Obviously you could do more than set the visibility to hidden: Add a class to the deviant images, remove from DOM, display: none, add a pink border, destroy the DOM at first instance of a broken image, etc&#8230;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ever run into the issue where dynamic content loads on a page and occasionally contains a broken image icon (and a 404 on the get request for the image)? Well, I have&#8230; So here&#8217;s my plan: function isImageOk(img) { if (!img.complete) { return false; } if (typeof img.naturalWidth != &#8220;undefined&#8221; &amp;&amp; img.naturalWidth == 0) { [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":4919,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[28,17],"tags":[],"class_list":["post-802","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding","category-technology","clearfix","post-index"],"acf":[],"jetpack_featured_media_url":"https:\/\/corbinrose.com\/blog\/wp-content\/uploads\/2013\/06\/pexels-photo-574073-1.jpeg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/posts\/802","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/comments?post=802"}],"version-history":[{"count":0,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/posts\/802\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/media\/4919"}],"wp:attachment":[{"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/media?parent=802"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/categories?post=802"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/tags?post=802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}