css - 捕获并使用 SASS 文件中的所有图像 URL，以使用仅 css 预加载

Question

我最近开始为一个元素使用背景图像的纯 css 图像预加载。

//preload images
body:after{  
    display: none;
    content: url(img01.png) url(img02.png);
}

//use images
li.one { background-image: (img01.png) }
li.two { background-image: (img02.png) }

我从 SCSS 制作我的 CSS 文件，想知道是否有某种方法可以使用 SASS 来运行文件并创建主体:从整个文件的背景图像 URL 预加载之后？

如果没有，您最好的解决方案是什么，在编译 CSS 文件后制作一个脚本以使用 Regex 执行此步骤？

Answer 1

@yorbro 解决方案适用于这种特定情况，但我认为最好只使用一个函数同时执行这两件事，将图像路径添加到 $preload-images 列表并返回值。这是 preload-img() 函数:

// This declare a list variable to store all images to preload
$preloaded-images: ();

// This function will append the image or images to $preload-images and returns img path values
@function preload-img($img-path) {
    $output: ();
    @each $img in $img-path {
        $preloaded-images: append($preloaded-images, url($img));
        $output: append($output, url($img), comma);
    }
    @return $output;
}

使用此功能，您可以使用背景或背景图像属性，并且可以传递多个图像路径来创建多个背景。正如@yorbro 所说，您应该在整个 CSS 的末尾添加 body:after:

// Use images, you can use background or background-image
// Note that you can pass a list of paths to preload-image function
li.one { background: preload-img("img01.png" "img02.png"); }
li.two { background-image: preload-img("img02.png"); }

//preload images
body:after{
    display: none;
    content: $preloaded-images;
}