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

我最近开始在一个项目中使用仅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执行此步骤？

您可以使用SASS mixin、函数和列表。首先，创建一个mixin

background image

，它将添加一个

background image

属性，并将该图像附加到SASS列表

预加载图像

/* '$img-path' is in your case 'img01.png' or 'img02.png' */
@mixin background-image($img-path) {
  background-image: url($img-path);
  $tmp: preload-image($img-path);
}

然后定义函数

preload image

，以及一个列表

$preload images

。该函数将

url（$img path）

附加到

$preload images

列表中

/* Preloaded images */
$preloaded-images: null;
@function preload-image($image-path) {
  $preloaded-images: $preloaded-images url($image-url);
  @return $preloaded-images;
}

每次要使用背景图像时，都要使用

background image

mixin。然后，在整个CSS文件的末尾添加

主体：在
表达式之后。这很重要，因为在输出
body:after
表达式之前，需要将所有预加载的图像添加到列表中。所以

//use images
li.one { @include background-image("img01.png"); }
li.two { @include background-image("img02.png"); }

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

结论：SASS作为一种语言在某些方面是有限的，但仍然足够强大，能够实现这些美好的事情
 您可以使用SASS mixin、函数和列表。首先，创建一个mixin
background image
，它将添加一个
background image
属性，并将该图像附加到SASS列表
预加载图像

/* '$img-path' is in your case 'img01.png' or 'img02.png' */
@mixin background-image($img-path) {
  background-image: url($img-path);
  $tmp: preload-image($img-path);
}

然后定义函数
preload image
，以及一个列表
$preload images
。该函数将
url（$img path）
附加到
$preload images
列表中

/* Preloaded images */
$preloaded-images: null;
@function preload-image($image-path) {
  $preloaded-images: $preloaded-images url($image-url);
  @return $preloaded-images;
}

每次要使用背景图像时，都要使用
background image
mixin。然后，在整个CSS文件的末尾添加
主体：在
表达式之后。这很重要，因为在输出
body:after
表达式之前，需要将所有预加载的图像添加到列表中。所以

//use images
li.one { @include background-image("img01.png"); }
li.two { @include background-image("img02.png"); }

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

结论：SASS作为一种语言在某些方面是有限的，但仍然足够强大，能够实现这些美好的事情
 @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;
}

@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;
}

你的意思是，如果你说类似
.foo{content:image\u dir\u contents（'some\u dir'）}
的话，它会查看
some\u dir
目录的内容，并根据它生成图像列表吗？Sass如何知道图片的排列顺序？对不起，我本可以更清楚。我正在使用SCSS文件中列出的背景图像。大多数（如果不是全部的话）浏览器会推迟背景图像的加载，直到它们显示在屏幕上——所以有时候在背景图像显示之前会有延迟。我现在已修正这项质询。将链接放置到内容属性中，即使隐藏，也会强制浏览器加载它们。您的意思是，如果您说类似于
.foo{content:image\u dir\u contents（'some\u dir'）}
的话，它会查看
some\u dir
目录的内容并基于此生成图像列表吗？Sass如何知道图片的排列顺序？对不起，我本可以更清楚。我正在使用SCSS文件中列出的背景图像。大多数（如果不是全部的话）浏览器会推迟背景图像的加载，直到它们显示在屏幕上——所以有时候在背景图像显示之前会有延迟。我现在已修正这项质询。将链接放置到内容属性中（即使隐藏），也会强制浏览器加载链接。