Tattica.js一种策略性加载图像使用介绍和代码示例

Tattica: a tactic approach to image loading，包含该图像加载库的各种加载策略（自适应 | 同步 | 延迟 | 指定优先级 | 区块）使用说明和代码示例。

tattica.js, demo, introduction

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

const images = document.querySelectorAll("img");
const normals = document.querySelectorAll(".normal");
const sync = document.querySelectorAll(".sync");

const placeholder = img => {
    const ref = img;
    if (img.src === "")
        ref.src = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=";
};

const loadAnimation = img => {
    img.classList.add("pulse");
};

const uniqueUrl = img => {
    const initial = img.attributes["data-src"];
    if (!initial) return;
    img.setAttribute("data-src", `${initial.value}?${Date.now()}`);
};

normals.forEach(loadAnimation);
images.forEach(img => {
    placeholder(img);
    uniqueUrl(img);
});

const config = {
    // A timestamp is printed on elements for testing purposes
    timestamp: true,

// Tells tattica not to load images in the viewport
    // => in this demo every image is in the viewport when loaded
    loadIntersections: false,

// Trigger animation
    callback: loadAnimation,

// Deactivated timeout to show that tattica can behave truly sync.
    // In a real-world scenario it should always be a value. Defaults: 1000ms
    timeout: false
};

// Tattica starts working immedialtely waiting for `load` event.
// For this demo, to trigger loadings, is necessary to dispatch a fake event.
sync.forEach(button =>
    button.addEventListener("click", e => {
        const target = e.target.attributes["data-target"].value;
        config.flag = target;
        tattica(config);
        dispatchEvent(new Event("load"));
    })
);

编译

CSS

:root {
    --background: #faf8f5;
    --box-background: #b197ce;
    --box-num: #f8f0ff;
    --priority-background: rgb(255, 203, 203);
    --priority-color: rgb(252, 23, 23);
    --block-background: rgb(212, 238, 255);
    --block-color: rgb(0, 46, 250);
    --text-color: rgb(94, 94, 94);
    --heading-color: #000;
    --shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    --pulse-color: #fbbea9;
}
body {
    background: var(--background);
    font-family: monospace;
}
h1 {
    color: var(--heading-color);
}
p,
li {
    color: var(--text-color);
    font-size: 16px;
    line-height: 1.5;
}
code {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 2px;
    padding: 3px 5px;
    color: var(--priority-color);
}
.container {
    max-width: 700px;
    margin: 50px auto 100px auto;
}
.main-title {
    text-align: center;
}
.main-title h1 {
    font-size: 48px;
    margin-bottom: 10px;
}
.title {
    margin-bottom: 20px;
}
.article {
    margin-top: 60px;
}
.gallery {
    display: flex;
    flex-wrap: wrap;
    direction: row;
}
.box {
    display: block;
    position: relative;
    width: 200px;
    height: 200px;
    margin: 10px;
    background: var(--box-background);
    border-radius: 7px;
    box-shadow: var(--shadow);
}
.box img {
    border-radius: 7px;
    object-fit: fill;
}
.box .num,
.box .priority,
.box .block {
    position: absolute;
    margin: 10px;
    padding: 0 5px;
    border-radius: 5px;
    background: var(--box-num);
}
.box .priority,
.box .block {
    bottom: 0;
    font-size: 16px;
    color: #f9f9f9;
}
.box .num {
    font-size: 21px;
    color: var(--heading-color);
}
.box .priority {
    background: var(--priority-background);
    color: var(--priority-color);
}
.box .block {
    background: var(--block-background);
    color: var(--block-color);
}
.carousel {
    width: 100px !important;
    height: 100px !important;
    margin: 10px 15px;
}
.carousel img {
    max-width: 100%;
    max-height: 200%;
}
.pulse {
    box-shadow: 0 0 0 0 var(--pulse-color);
    -webkit-animation: pulse 2.2s cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: pulse 2.2s cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: pulse 2.2s cubic-bezier(0.66, 0, 0, 1);
    animation: pulse 2.2s cubic-bezier(0.66, 0, 0, 1);
}
@-webkit-keyframes pulse {
    to {
        box-shadow: 0 0 0 15px rgba(232, 76, 61, 0);
    }
}
@-moz-keyframes pulse {
    to {
        box-shadow: 0 0 0 15px rgba(232, 76, 61, 0);
    }
}
@-ms-keyframes pulse {
    to {
        box-shadow: 0 0 0 15px rgba(232, 76, 61, 0);
    }
}
@keyframes pulse {
    to {
        box-shadow: 0 0 0 15px rgba(232, 76, 61, 0);
    }
}
/* button credits to @finnhvman */

.button {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    border: none;
    border-radius: 4px;
    padding: 0 16px;
    min-width: 64px;
    height: 36px;
    vertical-align: middle;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
    background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
    box-shadow: var(--shadow);
    font-family: monospace;
    font-size: 14px;
    font-weight: 500;
    line-height: 36px;
    overflow: hidden;
    outline: none;
    cursor: pointer;
    transition: box-shadow 0.2s;
}
.button::-moz-focus-inner {
    border: none;
}
/* Overlay */

.button::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
    opacity: 0;
    transition: opacity 0.2s;
}
/* Ripple */

.button::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    padding: 50%;
    width: 32px;
    /* Safari */
    
    height: 32px;
    /* Safari */
    
    background-color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
    transition: opacity 1s, transform 0.5s;
}
/* Hover, Focus */

.button:hover,
.button:focus {
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.button:hover::before {
    opacity: 0.08;
}
.button:focus::before {
    opacity: 0.24;
}
.button:hover:focus::before {
    opacity: 0.3;
}
/* Active */

.button:active {
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.button:active::after {
    opacity: 0.32;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0s;
}
/* Disabled */

.button:disabled {
    color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.12);
    box-shadow: none;
    cursor: initial;
}
.button:disabled::before {
    opacity: 0;
}
.button:disabled::after {
    opacity: 0;
}
@media screen and (max-width: 700px) {
    .box {
        margin: 3px;
    }
    .box,
    .box img {
        width: 100px;
        height: 100px;
    }
    .carouselGallery .carousel,
    .carouselGallery .box img {
        width: 60px !important;
        height: 100px;
    }
    .box .block,
    .box .priority {
        margin: 2px;
        padding: 3px;
        font-size: 10.5px;
    }
}

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Showcase</title>
    <link rel="stylesheet" href="show.css">
</head>

<body>
    <div class="wrapper">
        <div class="main-title">
            <h1>Tattica.js</h1>
            <p>A tactic approach to image loading</p>
            
            <a class="github-button" href="https://github.com/lucagez/tattica" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star lucagez/tattica on GitHub">Star</a>

</div>
        <div class="container">
            <div class="title">
                <h1>Why</h1>
                <p>This is how images are usually loaded ⬇</p>
            </div>

<div class="gallery">
                <div class="box"><img class="normal" src="https://source.unsplash.com/200x200/?water" alt="1">
                </div>
                <div class="box"><img class="normal" src="https://source.unsplash.com/200x200/?car" alt="2">
                </div>
                <div class="box"><img class="normal" src="https://source.unsplash.com/200x200/?sword" alt="3">
                </div>
                <div class="box"><img class="normal" src="https://source.unsplash.com/200x200/?horse" alt="4">
                </div>
                <div class="box"><img class="normal" src="https://source.unsplash.com/200x200/?rain" alt="5">
                </div>
                <div class="box"><img class="normal" src="https://source.unsplash.com/200x200/?mountain" alt="6">
                </div>
            </div>
            <div class="article">
                <p>It's completely fine. If you take a closer look at the network tab in the <code>developer tools</code> of your browser, you will see that the requests are made approximately at the same time.</p>
                <p>This is a good method for loading the part of the website that should be served to your user as fast as possible.</p>
                <p>However, let's admit that all the images that lives in your homepage are not contained in the viewport of the page. Very probable scenario, right?</p>
                <p>For your user, all the images that doesn't fit in those first <code>100vh</code> aren't real. He doesn't know he will need them.</p>
                <p>So, if you are taking this approach you are increasing the total loading time of your website; because your page load will end after the last image is downloaded.</p>
                <p><strong>note:</strong> The requests start from the top of your page, but this doesn't mean that the first image requested are the first image to be downloaded completely.</p>
            </div>
            <div class="article">
                <h1>How</h1>
                <p>Using <strong>Tattica.js</strong> you can choose exacly when your images will be loaded in a very straightforward manner.</p>
                <p>So you will be able to decide which images needs to served immediately and defer the loading of all the others when your browser is not too busy doing other important things.</p>
                <ul>
                    <li>Starts only after <code>load</code> event.</li>
                    <li>Priority (index) to control the exact loading order of your images.</li>
                    <li><code>window.requestIdleCallback</code> used to know when it's the right time for your browser to trigger new requests.</li>
                    <li><code>intersectionObservers</code> used to load anyway images that are in the viewport.</li>
                    <li>A handy <code>callback</code> on every image load (now used to trigger the pulse animation).</li>
                    <li>Possibility to define blocks of loading images (decide which requests need to be sync and which async).
                    </li>
                    <li><code>navigator.connection.effectivetype</code> to check the type of connection of your users and load images accordingly.</li>
                    <li><code>setTimeout</code> will take care that no image will stop forever your loading queue.</li>
                    <li>Possibility to define a fallback for images that returns errors.</li>
                    <li>Super simple to integrate in your workflow (you'll only need to write html attributes).</li>
                    <li>Friendly error messages (:</li>
                </ul>
            </div>
            <div class="article">
                <h1>Demo</h1>
                <ul>
                    <li>The <code>timeout</code> prop is set to <code>false</code>, so all the following examples are only for demo purpose.</li>
                    <li>The <code>loadIntersections</code> prop is set to <code>false</code> as well. Otherwise every image would be downloaded immediately.</li>
                </ul>
            </div>
        </div>
        <div class="container">
            <div class="title">
                <h1>Sync loading</h1>
                <p>Tattica.js loading images synchronously</p>
                <button class="sync button" type="button" data-target="data-flag-1">load</button>
            </div>

<div class="gallery g1">
                <div class="box">
                    <p class="num">1</p><img data-flag-1 data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/0.jpg" alt="1">
                </div>
                <div class="box">
                    <p class="num">2</p><img data-flag-1 data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/1.jpg" alt="2">
                </div>
                <div class="box">
                    <p class="num">3</p><img data-flag-1 data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/2.jpg" alt="3">
                </div>
                <div class="box">
                    <p class="num">4</p><img data-flag-1 data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/3.jpg" alt="4">
                </div>
                <div class="box">
                    <p class="num">5</p><img data-flag-1 data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/4.jpg" alt="5">
                </div>
                <div class="box">
                    <p class="num">6</p><img data-flag-1 data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/5.jpg" alt="6">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="title">
                <h1>block loading</h1>
                <p>Tattica.js loading images in blocks</p>
                <p><strong>note:</strong> The images 4, 5, 6 won't start laoding until every image with the <code>block</code> badge is loaded.</p>
                <button class="sync button" type="button" data-target="data-flag-2">load</button>
            </div>
            <div class="gallery g2">

<div class="box">
                    <p class="num">1</p>
                    <p class="block">block</p><img data-flag-2 data-block="1" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/6.jpg" alt="4">
                </div>
                <div class="box">
                    <p class="num">4</p><img data-flag-2 data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/7.jpg" alt="5">
                </div>
                <div class="box">
                    <p class="num">1</p>
                    <p class="block">block</p><img data-flag-2 data-block="1" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/8.jpg" alt="6">
                </div>
                <div class="box">
                    <p class="num">5</p><img data-flag-2 data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/9.jpg" alt="1">
                </div>
                <div class="box">
                    <p class="num">1</p>
                    <p class="block">block</p><img data-flag-2 data-block="1" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/10.jpg" alt="2">
                </div>
                <div class="box">
                    <p class="num">6</p><img data-flag-2 data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/11.jpg" alt="3">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="title">
                <h1>Priority loading</h1>
                <p>Tattica.js loading images with priority.</p>
                <p><strong>note:</strong> elements 5, 6 are loaded only after the last element with <code>priority</code> badge is loaded</p>
                <button class="sync button" type="button" data-target="data-flag-3">load</button>
            </div>

<div class="gallery g2">
                <div class="box">
                    <p class="num">4</p>
                    <p class="priority">priority</p><img data-flag-3 data-priority="4" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/12.jpg" alt="1">
                </div>
                <div class="box">
                    <p class="num">5</p><img data-flag-3 data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/13.jpg" alt="5">
                </div>
                <div class="box">
                    <p class="num">3</p>
                    <p class="priority">priority</p><img data-flag-3 data-priority="3" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/14.jpg" alt="3">
                </div>
                <div class="box">
                    <p class="num">2</p>
                    <p class="priority">priority</p><img data-flag-3 data-priority="2" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/15.jpg" alt="4">
                </div>
                <div class="box">
                    <p class="num">6</p>
                    <img data-flag-3 data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/16.jpg" alt="5">
                </div>
                <div class="box">
                    <p class="num">1</p>
                    <p class="priority">priority</p><img data-flag-3 data-priority="1" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/17.jpg" alt="6">
                </div>
            </div>
        </div>

<div class="container">
            <div class="title">
                <h1>Carousel</h1>
                <p>Predicting user behavior</p>
                <p><strong>e.g.</strong> In a case like a carousel (or a slideshow), starting at 1, you know from your analytics that the majority of your users will look at the image on the right.</p>
                <p>You can then define the loading priority accordingly. Image on the right first (higher probability), image on the left second (lower probability), subsequent loading of other images in block.</p>
                <button class="sync button" type="button" data-target="data-flag-4">load</button>
            </div>
            <div class="gallery g2 carouselGallery">

<div class="box carousel">
                    <p class="num">4</p>
                    <p class="block">block</p><img data-flag-4 data-block="1" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/18.jpg" alt="1">
                </div>
                <div class="box carousel">
                    <p class="num">3</p>
                    <p class="priority">priority</p><img data-flag-4 data-priority="3" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/19.jpg" alt="2">
                </div>
                <div class="box carousel">
                    <p class="num">1</p>
                    <p class="priority">priority</p><img data-flag-4 data-priority="1" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/20.jpg" alt="3">
                </div>
                <div class="box carousel">
                    <p class="num">2</p>
                    <p class="priority">priority</p><img data-flag-4 data-priority="2" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/21.jpg" alt="4">
                </div>
                <div class="box carousel">
                    <p class="num">4</p>
                    <p class="block">block</p><img data-flag-4 data-block="1" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/22.jpg" alt="5">
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="title">
            <h1>Adaptive serving</h1>
            <p>Tattica.js loading images according to <code>Navigator.connection.effectivetype</code>
            </p>
            <p>If you slow down your connection (or if you are on a medium to slow connection) in <code>performance</code> tab of dev tools you will see that smaller images are loaded.</p>
            <button class="sync button" type="button" data-target="data-flag-5">load</button>
        </div>

<div class="gallery">
            <div class="box">
                <p class="num">1</p><img data-flag-5 data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/23.jpg" data-src-slow="https://source.unsplash.com/100x100/?dj" alt="1">
            </div>
            <div class="box">
                <p class="num">2</p><img data-flag-5 data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/24.jpg" data-src-medium="https://source.unsplash.com/100x100/?fruits" data-src-slow="https://source.unsplash.com/100x100/?fruits" alt="2">
            </div>
            <div class="box">
                <p class="num">3</p><img data-flag-5 data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/25.jpg" data-src-medium="https://source.unsplash.com/100x100/?apple" data-src-slow="https://source.unsplash.com/100x100/?apple" alt="3">
            </div>
            <div class="box">
                <p class="num">4</p><img data-flag-5 data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/26.jpg" data-src-medium="https://source.unsplash.com/100x100/?banana" data-src-slow="https://source.unsplash.com/100x100/?banana" alt="4">
            </div>
            <div class="box">
                <p class="num">5</p><img data-flag-5 data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/27.jpg" data-src-medium="https://source.unsplash.com/100x100/?yogurt" data-src-slow="https://source.unsplash.com/100x100/?yogurt" alt="5">
            </div>
            <div class="box">
                <p class="num">6</p><img data-flag-5 data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/28.jpg" data-src-medium="https://source.unsplash.com/100x100/?avocado" data-src-slow="https://source.unsplash.com/100x100/?avocado" alt="6">
            </div>
        </div>
    </div>
    <div class="container">
        <div class="title">
            <h1>Gallery</h1>
            <p>Loading subsequent blocks</p>
            <p>In a large gallery probably only a portion of the total images fits within the viewport. So you could be load images in subsequent <code>blocks</code> to serve the first images faster.</p>
            <button class="sync button" type="button" data-target="data-flag-6">load</button>
        </div>

<div class="gallery carouselGallery">
            <div class="box carousel">
                <p class="block">block 1</p><img data-flag-6 data-priority-block="1" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/29.jpg" alt="1">
            </div>
            <div class="box carousel">
                <p class="block">block 1</p><img data-flag-6 data-priority-block="1" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/30.jpg" alt="2">
            </div>
            <div class="box carousel">
                <p class="block">block 1</p><img data-flag-6 data-priority-block="1" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/31.jpg" alt="3">
            </div>
            <div class="box carousel">
                <p class="block">block 1</p><img data-flag-6 data-priority-block="1" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/32.jpg" alt="4">
            </div>
            <div class="box carousel">
                <p class="block">block 1</p><img data-flag-6 data-priority-block="1" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/33.jpg" alt="5">
            </div>
            <div class="box carousel">
                <p class="block">block 2</p><img data-flag-6 data-block="2" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/34.jpg" alt="1">
            </div>
            <div class="box carousel">
                <p class="block">block 2</p><img data-flag-6 data-block="2" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/35.jpg" alt="2">
            </div>
            <div class="box carousel">
                <p class="block">block 2</p><img data-flag-6 data-block="2" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/36.jpg" alt="3">
            </div>
            <div class="box carousel">
                <p class="block">block 2</p><img data-flag-6 data-block="2" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/37.jpg" alt="4">
            </div>
            <div class="box carousel">
                <p class="block">block 2</p><img data-flag-6 data-block="2" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/38.jpg" alt="5">
            </div>
            <div class="box carousel">
                <p class="block">block 3</p><img data-flag-6 data-block="3" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/39.jpg" alt="1">
            </div>
            <div class="box carousel">
                <p class="block">block 3</p><img data-flag-6 data-block="3" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/40.jpg" alt="2">
            </div>
            <div class="box carousel">
                <p class="block">block 3</p><img data-flag-6 data-block="3" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/41.jpg" alt="3">
            </div>
            <div class="box carousel">
                <p class="block">block 3</p><img data-flag-6 data-block="3" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/42.jpg" alt="4">
            </div>
            <div class="box carousel">
                <p class="block">block 3</p><img data-flag-6 data-block="3" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/43.jpg" alt="5">
            </div>
            <div class="box carousel">
                <p class="block">block 4</p><img data-flag-6 data-block="4" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/44.jpg" alt="1">
            </div>
            <div class="box carousel">
                <p class="block">block 4</p><img data-flag-6 data-block="4" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/45.jpg" alt="2">
            </div>
            <div class="box carousel">
                <p class="block">block 4</p><img data-flag-6 data-block="4" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/46.jpg" alt="3">
            </div>
            <div class="box carousel">
                <p class="block">block 4</p><img data-flag-6 data-block="4" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/47.jpg" alt="4">
            </div>
            <div class="box carousel">
                <p class="block">block 4</p><img data-flag-6 data-block="4" data-src="https://raw.githubusercontent.com/lucagez/tattica/master/demo/images/48.jpg" alt="5">
            </div>
        </div>
    </div>
    </div>
    <script src="https://unpkg.com/tattica@0.1.0/dist/tattica.umd.js"></script>
    
    <script async defer src="https://buttons.github.io/buttons.js"></script>
</body>

</html>

Tattica: a tactic approach to image loading，包含该图像加载库的各种加载策略（自适应 | 同步 | 延迟 | 指定优先级 | 区块）使用说明和代码示例。

tattica.js, demo, introduction

编辑器支持Emmet

快捷键

Tattica: a tactic approach to image loading，包含该图像加载库的各种加载策略（自适应 | 同步 | 延迟 | 指定优先级 | 区块）使用说明和代码示例。

tattica.js, demo, introduction

three.js Draco模型压缩文件加载代码示例

使用anime.js构建的svg插图演示动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：