simasta / bootstrap-lazy-load

bootstrap-lazy-load

Tutorial

For detailed instruction's, view Solodev's BLL_POST_TITLE article.

Demo

Try out a working example on JSFiddle.

HTML

The tutorial contains the following basic HTML markup.

<div id="theRecipeGrid">
<div class="container">
    <div class="row" id="recipegrid">


        <div class="col-xs-6 col-md-4 recipeBox" onclick="location.href='#'">
            <div class="imgHolder">
                <img src="/core/fileparse.php/8/urlt/_resources/images/content/farms-loader.gif" data-echo="https://www.americandairy.com//_resources/images/content/recipes-default.jpg" class="img-responsive cover">
                <div class="in-box w-100">
                    <div class="super-box h-100 w-100 text-center d-flex justify-content-center align-items-center">
                        <div class="box-text">
                            <p class="font-weight-bold">See Recipe</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="description-box">
                <p class="recipe_name text-uppercase font-weight-bold">Test Title</p>
            </div>
        </div>
        <div class="col-xs-6 col-md-4 recipeBox" onclick="location.href='#'">
            <div class="imgHolder">
                <img src="https://www.americandairy.com//core/fileparse.php/8/urlt/_resources/images/content/farms-loader.gif" data-echo="https://www.americandairy.com/_resources/images/content/recipes-default.jpg"
                    class="img-responsive cover">
                <div class="in-box w-100">
                    <div class="super-box h-100 w-100 text-center d-flex justify-content-center align-items-center">
                        <div class="box-text">
                            <p class="font-weight-bold">See Recipe</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="description-box">
                <p class="recipe_name text-uppercase font-weight-bold">Test Title</p>
            </div>
        </div>
        <div class="col-xs-6 col-md-4 recipeBox" onclick="location.href='#'">
            <div class="imgHolder">
                <img src="https://www.americandairy.com/core/fileparse.php/8/urlt/_resources/images/content/farms-loader.gif" data-echo="https://www.americandairy.com/_resources/images/content/recipes-default.jpg" class="img-responsive cover">
                <div class="in-box w-100">
                    <div class="super-box h-100 w-100 text-center d-flex justify-content-center align-items-center">
                        <div class="box-text">
                            <p class="font-weight-bold">See Recipe</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="description-box">
                <p class="recipe_name text-uppercase font-weight-bold">Test Title</p>
            </div>
        </div>
        <div class="col-xs-6 col-md-4 recipeBox" onclick="location.href='#'">
            <div class="imgHolder">
                <img src="https://www.americandairy.com/core/fileparse.php/8/urlt/_resources/images/content/farms-loader.gif" data-echo="https://www.americandairy.com/_resources/images/content/recipes-default.jpg" class="img-responsive cover">
                <div class="in-box w-100">
                    <div class="super-box h-100 w-100 text-center d-flex justify-content-center align-items-center">
                        <div class="box-text">
                            <p class="font-weight-bold">See Recipe</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="description-box">
                <p class="recipe_name text-uppercase font-weight-bold">Test Title</p>
            </div>
        </div>
        <div class="col-xs-6 col-md-4 recipeBox" onclick="location.href='#'">
            <div class="imgHolder">
                <img src="/core/fileparse.php/8/urlt/_resources/images/content/farms-loader.gif" data-echo="https://www.americandairy.com//_resources/images/content/recipes-default.jpg" class="img-responsive cover">
                <div class="in-box w-100">
                    <div class="super-box h-100 w-100 text-center d-flex justify-content-center align-items-center">
                        <div class="box-text">
                            <p class="font-weight-bold">See Recipe</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="description-box">
                <p class="recipe_name text-uppercase font-weight-bold">Test Title</p>
            </div>
        </div>
        </div>
    </div>
</div>

CSS

All required CSS is contained with bootstrap-lazy-load.css

JS

All required JSis contained with bootstrap-lazy-load.js

External Resources

This tutorial includes the following third party resources.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://rawgit.com/toddmotto/echo/master/dist/echo.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>