使用JS和CSS3滤镜模拟图像延迟加载

Image Lazy load, 先加载一个小图片，加上滤镜效果使其模糊化。然后页面完成后加载大图片。

css3, filter

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3598
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// This is "probably" IE9 compatible but will need some fallbacks for IE8
// - (event listeners, forEach loop)

// wait for the entire page to finish loading
window.addEventListener('load', function() {

// setTimeout to simulate the delay from a real page load
    setTimeout(lazyLoad, 1000);

});

function lazyLoad() {
    var card_images = document.querySelectorAll('.card-image');

// loop over each card image
    card_images.forEach(function(card_image) {
        var image_url = card_image.getAttribute('data-image-full');
        var content_image = card_image.querySelector('img');

// change the src of the content image to load the new high res photo
        content_image.src = image_url;

// listen for load event when the new photo is finished loading
        content_image.addEventListener('load', function() {
            // swap out the visible background image with the new fully downloaded photo
            card_image.style.backgroundImage = 'url(' + image_url + ')';
            // add a class to remove the blur filter to smoothly transition the image change
            card_image.className = card_image.className + ' is-loaded';
        });

});

}

编译

CSS

/* 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;
    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;
}

HTML

Image Lazy load, 先加载一个小图片，加上滤镜效果使其模糊化。然后页面完成后加载大图片。

css3, filter

编辑器支持Emmet

快捷键

Image Lazy load, 先加载一个小图片，加上滤镜效果使其模糊化。然后页面完成后加载大图片。

css3, filter

使用CSS3滤镜/合成模式和伪元素实现仿Spotify网站风格的图像双色特效

使用CSS3变换、滤镜和背景图片构造的科幻虫洞

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：