0

我最近开始为项目使用背景图像的纯 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 执行此步骤的脚本？

4

2 回答 2

2

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

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

// 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;
}
于 2013-12-09T16:20:11.217 回答
1

你可以为此使用 SASS mixins、函数和列表。首先，您创建一个 mixin background-image，它将添加一个background-image属性并将图像附加到 SASS 列表中preload-images。

/* '$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和 list $preloaded-images。该函数附加url($img-path)到$preloaded-images列表中。

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

每次你想使用背景图片时，你都会使用background-imagemixin。然后，在整个 CSS 文件的末尾添加body:after表达式。这很重要，因为您需要在输出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 作为一种语言在某些方面受到限制，但仍然足够强大，可以实现这些美好的事物！

于 2013-12-08T14:43:26.957 回答