Delayed (Lazy) Loading in HTML by JavaScript (+jQuery)

Delayed (Lazy) Loading in HTML by JavaScript (+jQuery)

This is sometimes called 'Lazy Loading'. Maths, i.e. equations, are also delayed-rendered by MathJax . (Some of this document are written in Korean (called Hangul). People who do not know Hangul, just read english part. That will be enough.) 사용자가 안보고 넘길것 같은 부분은 굳이 미리 로딩해놓지 말고, 속도를 빠르게, 서버 부담을 적게 덜어주자는 목적으로 Delayed Loading이라는 개념이 있음. 특히나 용량이 큰 이미지나 동영상을 이렇게 처리해주면 좋은듯 .

If you click DocuK Log: button, DocuK Script Log printed will appear at right-bottom. Bug report or any improvement suggestion is always welcome. I set kipid.delayPad=0; (px) and kipid.wait=2000; (msec) in this document. Reduce kipid.wait (ms) and change kipid.delayPad when you actually implement it. I set big value to show the delayed-load apprently.

Usually I set kipid.delayPad=3000; (px) and kipid.wait=2000; (sec) in common documents including many maths and images.

Tested in Chrome (+Android Smartphone), IE, and FireFox browsers at 2014-05-29. (Chrome gave the best performance. IE was the worst.)

Table of Contents

Delayed(Lazy)-Loading: Images, Videos, Maths and possibly Graphs

imgs or iframes with delayed-src attribute (:<img delayed-src="image file path">, <iframe delayed-src="url to load">), divs with delayed-bgimage (:<div delayed-bgimage="image file path" style="background-repeat:no-repeat; background-attachment:fixed; background-position:center"></div>) will be delayed-loaded.

Graphs or Charts by JavaScript can also be delayed-loaded by window's "on scroll" event. But not implemented yet here.

HTML source example

The below source is actually implemennted in section . This code below is automatically copied by JavaScript from that section for the display.

Delayed-Loading JavaScript code (by kipid)

Code is updated at 2014-06-12. MathJax maths are also delayed-loaded. Ctrl+F "// Delayed Loading." will be helpful.

Inside <script src="http://cfs.tistory.com/custom/blog/146/1468360/skin/images/docuK-min.js"></script> is there a script code related to the delayed loading. Unrelated codes are cut for the sake of simplicity. Full code is available in .

Old version without delayed MathJax rendering

I got some ideas mainly from the code posted in , and got helped from . Thanks.

Implemented example of Delayed Loading

div with delayed-bgimage

This is an image with delayed-src. and .

div with delayed-bgimage again

iframe 동영상 테스트. fixed ratio 동영상. iframe (delayed-loaded or not) sometimes make scrollTop problem in old smart phone like Galaxy S.

This is an image with delayed-src.

\eta_{\mu \nu} = \begin{bmatrix} -1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\ldots} } } } \[\begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned}\] \[ 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \quad\quad \text{for $|q|<1$}. \] \[ \begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned} \]

References and Related Articles

Related Posts

1. kipid's blog - Improving web performance; Delayed loading 및 다른 web page optimization들 관련.
2. pamela fox's blog - Improving front page performance: removing images, 5 ways, 2014-01-30; TinyPNG로 이미지 용량줄이기, Delay load로 scroll 되기 전의 load 줄이기.
3. 인터넷, Web, HTML, 블로그에서 수식 사용하기 (Equation or math in HTML, blog)

docuK

4. kipid's blog - HTML docuK format ver. 2.1
5. kipid's blog - docuK short copiable version
6. github.com - kipid - docuK

Supported by

7. jQuery.com; and jQuery - download;
   // JavaScript enhancer
8. MathJax.org; and MathJax Documentation - latest; and The Core Configuration Options; and The MathJax.Hub Object;
   // Math renderer.
9. Google Code Prettify and Getting Started;
   // Code prettyfier.

Related API Documentations

10. MDN docs - CSS - background
11. jQuery.com - API - on(); and off() and scroll()
12. What is _.defer and _.throttle in JavaScript?, 2014-05-28, asked by kipid (me);
13. w3schools.com - CSS Selector Reference; and MDN guide - CSS - Selectors; You can add a default background to delayed elements using css like "img[delayed-src], iframe[delayed-src], div[delayed-bgimage] {background:url(defaultBg.jpg);}". This will be automatically replaced.
14. MathJax.org - Beautiful math in all browsers; and Getting started; and Loading and Configuring MathJax; and The Core Configuration Options; and Terms of service;
    and MathJax Documentation - latest; and The Core Configuration Options; and The MathJax.Hub Object;
    // LaTeX 형태의 수식도 표현해주고 MathML 형태의 수식(Mathematica랑 MS word 등에서 쓰이는 수식 code인듯? more machine-readable이라고. 최신 browser에서 MathML은 자동으로 처리해주는듯도. HTML/XML이랑 비슷한.), AsciiMath도 표현해 준다고 함.
    // CodeCogs보다 옵션들도 많고 더 좋아보이기도 하는데, 제대로 사용하려면 JavaScript도 어느정도는 알아야하고 공부가 조금 필요한듯.
    Promoting image: