html – 首先加载低分辨率背景图像,然后加载高分辨率图像

概述我正在尝试优化我的网站的大小,当它被输出到客户端.当缓存时我下降到1.9MB和29KB.问题是第一个加载包含一个非常优化移动设备的图像;它具有1080p分辨率. 所以我正在寻找一种方法,允许我首先加载低分辨率版本(min.bg.jpg),一旦网站加载,使用高分辨率版本 – 甚至一个分辨率接近设备的分辨率使用(NNNxNNN.bg.jpg或只是bg.jpg). 背景是使用CSS设置,就像每个人都期望 我正在尝试优化我的网站的大小,当它被输出到客户端.当缓存时我下降到1.9MB和29KB.问题是第一个加载包含一个非常优化移动设备的图像;它具有1080p分辨率.

所以我正在寻找一种方法,允许我首先加载低分辨率版本(min.bg.jpg),一旦网站加载,使用高分辨率版本 – 甚至一个分辨率接近设备的分辨率使用(NNNxNNN.bg.jpg或只是bg.jpg).

背景是使用CSS设置,就像每个人都期望的一样.它适用于身体和整个声明如下所示：

body {    background: url("/cdn/theme/images/bg.jpg");    color: white;    height: 100%;    wIDth: 100%;    background-repeat: no-repeat;    background-position: 50% 50%;    background-attachment: fixed;}

现在,我想改为使用min.bg.jpg代替第一次加载,然后像这样：

jquery(function(){    jquery("body").[...]});

我以哪种方式异步下载新的背景,然后将其作为新的CSS背景图像插入？

为了显示一些差异,这里是我正在测试的主要和迷你版本的一个例子：

IngwIE@IngwIEs-Macbook-Pro.local ~/Work/BIRD3/cdn/theme/images $file *.jpgbg.jpg:     JPEG image data,EXIF standardmin.bg.jpg: JPEG image data,JFIF standard 1.01IngwIE@IngwIEs-Macbook-Pro.local ~/Work/BIRD3/cdn/theme/images $du -h *.jpg1,0M    bg.jpg620K    min.bg.jpg

解决方法 这是我使用的方法

CSS：

#div_whatever {   position: whatever;   background-repeat: no-repeat;   background-position: whatever whatever;    background-image: url(dir/image.jpg);   /* image.jpg is a low-resolution at 30% quality. */}#img_highQuality {    display: none;}

HTML：

<img ID="img_highQuality" src="dir/image.png"><!-- img.png is a full-resolution image. --><div ID="div_whatever"></div>

Jquery：

$("#img_highQuality").off().on("load",function() {    $("#div_whatever").CSS({        "background-image" : "url(dir/image.png)"    });});// SIDe note: I usually define CSS arrays because// I inevitably want to go back and add another // property at some point.

怎么了：

>一个低分辨率版本的背景快速加载.
>同时,更高分辨率的版本被加载为隐藏的图像.
>当高分辨率图像被加载时,jquery用高分辨率版本交换div的低分辨率图像.

PURE Js VERSION

这个例子对于将一个元素更改为多个元素将是有效的.

CSS：

.hIDden {   display: none;}#div_whatever {   position: whatever;   background-repeat: no-repeat;   background-position: whatever whatever;    background-image: url(dir/image.jpg);   /* image.jpg is a low-resolution at 30% quality. */}

HTML：

<div ID="div_whatever"></div><img ID="img_whatever"  src="dir/image.png" onload="upgradeImage(this);">

JavaScript：

function upgradeImage(object) {    var ID = object.ID;    var target = "div_" + ID.substring(4);    document.getElementByID(target).style.backgroundImage = "url(" + object.src + ")";}

更新/增强(1/31/2017)

这个增强是gdbj的优点,我的解决方案导致图像路径在三个位置被指定.虽然我没有使用gdbj的addClass()技术,但是以下jquery代码被修改以提取图像路径(而不是将其连接到jquery代码中).更重要的是,该版本允许多个低分辨率高分辨率图像替换.

CSS

.img_highres {  display: none;}#div_whatever1 {  wIDth: 100px;  height: 100px;  background-repeat: no-repeat;  background-position: center center;  background-image: url(PATH_TO_LOW_RES_PHOTO_1);}#div_whatever2 {  wIDth: 200px;  height: 200px;  background-repeat: no-repeat;  background-position: center center;  background-image: url(PATH_TO_LOW_RES_PHOTO_2);}

HTML

<div ID="div_whatever1"></div><img ID="img_whatever1"  src="PATH_TO_HIGH_RES_PHOTO_1"><div ID="div_whatever2"></div><img ID="img_whatever2"  src="PATH_TO_HIGH_RES_PHOTO_2">

Jquery

$(function() {      $(".img_highres").off().on("load",function() {         var ID = $(this).attr("ID");         var highres = $(this).attr("src").toString();         var target = "#div_" + ID.substring(4);         $(target).CSS("background-image","url(" + highres + ")");      });   });

发生什么事：

>根据他们的CSS为每个div加载低分辨率图像背景图像设置. (请注意,CSS还将div设置为预期尺寸.)>同时,分辨率较高的照片正在进行中作为隐藏图像加载(所有共享类名img_highres).>每次img_highres照片都会触发一个jquery函数完成加载.> jquery函数读取图像src路径,和改变相应div的背景图像.在里面在上面的例子中,命名约定是可见div的“div_ [name]”和“img_ [同名]”用于加载的高分辨率图像背景.

总结

以上是内存溢出为你收集整理的html – 首先加载低分辨率背景图像,然后加载高分辨率图像全部内容，希望文章能够帮你解决html – 首先加载低分辨率背景图像,然后加载高分辨率图像所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。