js实现图片懒加载效果代码-html代码-BFW代码库

js实现图片懒加载效果代码

代码语言：html

代码描述：js实现图片懒加载效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
        /* Lazy Load Styles */
        .card-image {
            display: block;
            min-height: 20rem;
            /* layout hack */
            background: #fff center center no-repeat;
            background-size: cover;
            -webkit-filter: blur(3px);
            filter: blur(3px);
            /* blur the lowres image */
        }

        .card-image > img {
            display: block;
            width: 100%;
            opacity: 0;
            /* visually hide the img element */
        }

        .card-image.is-loaded {
            -webkit-filter: none;
            filter: none;
            /* remove the blur on fullres image */
            -webkit-transition: -webkit-filter 1s;
            transition: -webkit-filter 1s;
            transition: filter 1s;
            transition: filter 1s, -webkit-filter 1s;
        }




        /* Layout Styles */
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            font-size: 16px;
            font-family: sans-serif;
        }

        .card-list {
            display: block;
            margin: 1rem auto;
            padding: 0;
            font-size: 0;
            text-align: center;
            list-style: none;
        }

        .card {
            display: inline-block;
            width: 90%;
            max-width: 20rem;
            margin: 1rem;
            font-size: 1rem;
            text-decoration: none;
            overflow: hidden;
            box-shadow: 0 0 3rem -1rem rgba(0,0,0,0.5);
            -webkit-transition: box-shadow 0.1s, -webkit-transform 0.1s ease-in-out;
            transition: box-shadow 0.1s, -webkit-transform 0.1s ease-in-out;
            transition: transform 0.1s ease-in-out, box-shadow 0.1s;
            transition: transform 0.1s ease-in-out, box-shadow 0.1s, -webkit-transform 0.1s ease-in-out;
        }

        .card:hover {
            -webkit-transform: translateY(-0.5rem) scale(1.0125);
            transform: translateY(-0.5rem) scale(1.0125);
            box-shadow: 0 0.5em 3rem -1rem rgba(0,0,0,0.5);
        }

        .card-description {
            display: block;
            padding: 1em 0.5em;
            color: #515151;
            text-decoration: none;
        }

        .card-description > h2 {
            margin: 0 0 0.5em;
        }

        .card-description > p {
            margin: 0;
        }
    </style>



</head>

<body>
    <ul class="card-list">



             <li class="card">
            <a class="card-image" href="#"  style="background-image: url(//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90);" data-image-full="//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90">
                <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" />
            </a>
            <a class="card-description" href="https://michellezauner.bandcamp.com/album/psychopomp-2" target="_blank">
                <h2>Psychopomp</h2>
                <p>
                    Japanese Breakfast
                </p>
            </a>
        </li>

        <li class="card">
            <a class="card-image" href="#" style="background-image: url(//repo.bfw.wiki/bfwrepo/image/5e4b4000794db.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90);" data-image-full="//repo.bfw.wiki/bfwrepo/image/5e4b4000794db.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90">
                <img src=.........完整代码请登录后点击上方下载按钮下载查看