LazyLaoding CSS 背景（不是 HTML <img> 标签）

Question

我已经设法弄清楚如何在我的网站上延迟加载图像，通过<img>标签将图像调用到 HTML 中。我在 GitHub 上使用了这个包来完成这个。但是我在用 CSS 完成同样的事情时遇到了麻烦background:。

-有关该问题的一些信息：

我昨晚创建了一个图像菜单栏，它根据浏览器屏幕（提供链接）更改图像大小/位置。此图像菜单栏中的所有图像都通过background:CSS调用（而不是通过<img>标签）。

-现在我的问题：

我如何能够background:在我开始的这个项目的 css 中延迟加载图像。在我的网站上，我会按照上面 Github 链接中的说明更改<img src="">为<img data-src=""（在 HTML 中），并且图像将在它们在屏幕上可见时加载。

- 这样做的原因：

这纯粹是为了加快网站速度并避免一次加载所有图像。任何其他确保这不会影响加载时间的提示，或解决此问题的任何其他可能方法将不胜感激。

-注意：我已经使用了background:并且不background-image:用于这个项目。

如果你错过了我项目的链接： https : //jsfiddle.net/Shololom/wbgn210y/

Answer 1

从您提供的Github 项目中：

\n\n

懒惰的背景图像

\n\n

何时使用：你的图像被设置为CSS背景图像而不是真正的img，但你仍然想延迟加载它们。

\n\n

超文本标记语言

\n\n

<div class="lazy" data-src="../img/44721746JJ_15_a.jpg"></div>\n

\n\n

JavaScript

\n\n

var myLazyLoad = new LazyLoad({\n    elements_selector: ".lazy"\n});\n

\n\n

就是这样。每当 elements_selector 选择的元素不是 img 或 iframe 时，LazyLoad 会将在 data-src 属性中找到的图像放入该元素的背景图像中。

\n\n

编辑：完整示例：

\n\n

\r\n

\r\n

<div class="lazy" data-src="../img/44721746JJ_15_a.jpg"></div>\n

\r\n

var myLazyLoad = new LazyLoad({\n    elements_selector: ".lazy"\n});\n

\r\n

// Get products\r\nvar product1 = document.getElementById(\'product1\');\r\nvar product2 = document.getElementById(\'product2\');\r\nvar product3 = document.getElementById(\'product3\');\r\nvar product4 = document.getElementById(\'product4\');\r\nvar product5 = document.getElementById(\'product5\');\r\n\r\n// Create Lazy loader\r\nvar myLazyLoad = new LazyLoad({\r\n    elements_selector: ".lazy"\r\n});\r\n\r\n// Load images in a responsive way\r\nfunction loadImgs() {\r\n\tconsole.log(\'Loading images ...\');\r\n  \tvar src1;\r\n    var src2;\r\n    var src3;\r\n    var src4;\r\n    var src5;    \r\n\tif(window.matchMedia("only screen and (max-width:700px)").matches) {\r\n      /* The viewport is lesser than 700 pixels wide */\r\n  \tsrc1 = product1.getAttribute(\'data-src-small\');\r\n    src2 = product2.getAttribute(\'data-src-small\');\r\n    src3 = product3.getAttribute(\'data-src-small\');\r\n    src4 = product4.getAttribute(\'data-src-small\');\r\n    src5 = product5.getAttribute(\'data-src-small\');      \r\n   \r\n  } else {\r\n  \tsrc1 = product1.getAttribute(\'data-src-large\');\r\n    src2 = product2.getAttribute(\'data-src-large\');\r\n    src3 = product3.getAttribute(\'data-src-large\');\r\n    src4 = product4.getAttribute(\'data-src-large\');\r\n    src5 = product5.getAttribute(\'data-src-large\');   \r\n  } \r\n\r\n  // Set the data-src for lazy loader\r\n  product1.setAttribute(\'data-src\', src1);\r\n  product2.setAttribute(\'data-src\', src2);\r\n  product3.setAttribute(\'data-src\', src3);\r\n  product4.setAttribute(\'data-src\', src4);\r\n  product5.setAttribute(\'data-src\', src5); \r\n    \r\n  // Tell lazy loader that the data should be re-processed\r\n  product1.removeAttribute(\'data-was-processed\');\r\n  product2.removeAttribute(\'data-was-processed\');\r\n  product3.removeAttribute(\'data-was-processed\');\r\n  product4.removeAttribute(\'data-was-processed\');\r\n  product5.removeAttribute(\'data-was-processed\');   \r\n  \r\n  // Tell lazy loader to update\r\n  myLazyLoad.update();\r\n}\r\n\r\n// Load images first time\r\nloadImgs();\r\n\r\n// Reload images when window is resized\r\nvar lastWindowSize = window.innerWidth;\r\nwindow.onresize = function(event) {\r\n\tvar currentWindowSize = window.innerWidth; \r\n\tif((lastWindowSize <= 700 && currentWindowSize > 700) || (lastWindowSize > 700 && currentWindowSize <= 700)) {\r\n  \tloadImgs();\r\n  }\r\n\t\r\n  lastWindowSize = currentWindowSize;\r\n};

\r\n

\r\n

\r\n

\n\n

小提琴

\n