I realized that most of the modern browser download the image which is set on src attribute even if the img element is hidden. This sometimes goes to performance problem because even if there are a lot of hidden image which are only shown user interacts, all images are downloaded initial page load! So I wrote a simple javascript for reflesh the src attribute and download image only when user interacts somethig on window - like press button etc. I know you can use JQuery LazyLoad plugin , but I would like to take much more faster solution - no external javascript. Here is the demo. When you push the button, the image is loaded lazyly Load image Here is the key method. (maybe you can check the logic by viewing the src directly though.) Replace the src attribute with data-original attribute i the img tag. function loadImage(elem) { if(elem.attr("src") != elem.attr("data-original")) { elem.attr("src", elem.attr("data-original...
IT関連の技術やプログラミングを中心に記事を書いています。ハードウェアも好きなので、日々のちょっとしたお役立ち情報も投稿しています。