<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{.MetaTitle}}</title>

    <link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">

    <link rel="stylesheet" href="/static/simple-grid.css">
    <link rel="stylesheet" href="/static/home.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1 class="site-title">{{.SiteTitle}}</h1>
                <h2 class="album-title">{{.AlbumTitle}}</h2>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <ul class="images">
                    {{range .LoadAtStartImageUrls}}
                    <li>
                        <img src="{{.}}">
                    </li>
                    {{end}}
                    {{range .LazyLoadImageUrls}}
                    <li>
                        <img class="lazy" src="/static/placeholder.png" data-echo="{{.}}">
                    </li>
                    {{end}}
                </ul>
            </div>
        </div>
    </div>

    <script type="application/javascript" src="/static/echo.js"></script>
    <script type="application/javascript">
        echo.init({
            offset: 1000,
            throttle: 250,
            debounce: false,
            unload: true
        })
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{.MetaTitle}}</title>

    <link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">

    <link rel="stylesheet" href="/static/simple-grid.css">
    <link rel="stylesheet" href="/static/home.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1 class="site-title">{{.SiteTitle}}</h1>
                <h2 class="album-title">{{.AlbumTitle}}</h2>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <ul class="images">
                    {{range .LoadAtStartImageUrls}}
                    <li>
                        <img src="{{.}}">
                    </li>
                    {{end}}
                    {{range .LazyLoadImageUrls}}
                    <li>
                        <img class="lazy" src="/static/placeholder.png" data-echo="{{.}}">
                    </li>
                    {{end}}
                </ul>
            </div>
        </div>
    </div>

    <script type="application/javascript" src="/static/echo.js"></script>
    <script type="application/javascript">
        echo.init({
            offset: 10000,
            throttle: 250,
            debounce: false,
            unload: true
        })
    </script>
</body>
</html>
Increase distance at which images are preloaded
Increase distance at which images are preloaded
