Let us start out with what the data looks like:
| ID | Resource URL |
|---|---|
| 10292 | //media.example.com/020/4003/0293484/2783-2938.jpg |
| 10354 | //media.example.com/969/9856/6585143/9856-4587.jpg |
| 10543 | //media.example.com/987/4587/8765124/7815-7865.jpg |
| 10675 | //media.example.com/159/1298/6578324/4871-1298.jpg |
I already had a not found placeholder so I decided that every image would have that as it's source image. This would mean that I would be seeing an image for every entry in this list.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <img src="/content/images/placeholder-thumb-128.png" /> |
Now came the part that required me to work some magic. But first I needed to provide the actual image source to the image tag.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <body> | |
| <img src="/content/images/placeholder-thumb-128.png" data-src="//media.example.com/020/4003/0293484/2783-2938.jpg" /> | |
| <img src="/content/images/placeholder-thumb-128.png" data-src="//media.example.com/969/9856/6585143/9856-4587.jpg" /> | |
| <img src="/content/images/placeholder-thumb-128.png" data-src="//media.example.com/987/4587/8765124/7815-7865.jpg" /> | |
| <img src="/content/images/placeholder-thumb-128.png" data-src="//media.example.com/159/1298/6578324/4871-1298.jpg" /> | |
| <script src="jquery.js"></script> | |
| <script src="image.js"></script> | |
| </body> | |
| </html> |
With both the image placeholder and the assumed working image I set to work with a single event that would fire off after the page was loaded.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function ($) { | |
| if ($) { | |
| $.each($("#imageRecords img[data-src]"), function () { | |
| var $img = $(this); | |
| var $src = $img.attr("data-src"); | |
| $("<img src='" + $src + "' />").one("load", function () { | |
| $img.attr("src", $src) | |
| }); | |
| }); | |
| } | |
| })(jQuery); |
What this does is pretty simple. For each of the images that we are rendering into our table we attempt to load the image URL that is stored in the data-src attribute. If 'the one event' is successful then we replace the URL in the image source attribute for the value in the data-src attribute. So where is the magic? It is inside the one event, the handler is only called when the image loads. I use jQuery to construct an image tag with a source value which will request the image. If the image does not return successfully, the load event never fires and the thumbnail persists.
This was a fun little solution and it may need to have some performance enhancements for when displaying large numbers if images, however, the solution was designed around a very limited presentation.
No comments:
Post a Comment