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

前端之家收集整理的这篇文章主要介绍了html – 首先加载低分辨率背景图像,然后加载高分辨率图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试优化我的网站的大小,当它被输出到客户端.当缓存时我下降到1.9MB和29KB.问题是第一个加载包含一个非常优化移动设备的图像;它具有1080p分辨率.

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

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

  1. body {
  2. background: url("/cdn/theme/images/bg.jpg");
  3. color: white;
  4. height: 100%;
  5. width: 100%;
  6. background-repeat: no-repeat;
  7. background-position: 50% 50%;
  8. background-attachment: fixed;
  9. }

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

  1. jQuery(function(){
  2. jQuery("body").[...]
  3. });

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

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

  1. Ingwie@Ingwies-Macbook-Pro.local ~/Work/BIRD3/cdn/theme/images $file *.jpg
  2. bg.jpg: JPEG image data,EXIF standard
  3. min.bg.jpg: JPEG image data,JFIF standard 1.01
  4. Ingwie@Ingwies-Macbook-Pro.local ~/Work/BIRD3/cdn/theme/images $du -h *.jpg
  5. 1,0M bg.jpg
  6. 620K min.bg.jpg

解决方法

这是我使用的方法

CSS:

  1. #div_whatever {
  2. position: whatever;
  3. background-repeat: no-repeat;
  4. background-position: whatever whatever;
  5. background-image: url(dir/image.jpg);
  6. /* image.jpg is a low-resolution at 30% quality. */
  7. }
  8.  
  9. #img_highQuality {
  10. display: none;
  11. }

HTML:

  1. <img id="img_highQuality" src="dir/image.png">
  2. <!-- img.png is a full-resolution image. -->
  3.  
  4. <div id="div_whatever"></div>

JQUERY:

  1. $("#img_highQuality").off().on("load",function() {
  2. $("#div_whatever").css({
  3. "background-image" : "url(dir/image.png)"
  4. });
  5. });
  6. // Side note: I usually define CSS arrays because
  7. // I inevitably want to go back and add another
  8. // property at some point.

怎么了:

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

PURE JS VERSION

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

CSS:

  1. .hidden {
  2. display: none;
  3. }
  4.  
  5. #div_whatever {
  6. position: whatever;
  7. background-repeat: no-repeat;
  8. background-position: whatever whatever;
  9. background-image: url(dir/image.jpg);
  10. /* image.jpg is a low-resolution at 30% quality. */
  11. }

HTML:

  1. <div id="div_whatever"></div>
  2. <img id="img_whatever" class="hidden" src="dir/image.png" onload="upgradeImage(this);">

JAVASCRIPT:

  1. function upgradeImage(object) {
  2. var id = object.id;
  3. var target = "div_" + id.substring(4);
  4.  
  5. document.getElementById(target).style.backgroundImage = "url(" + object.src + ")";
  6. }

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

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

CSS

  1. .img_highres {
  2. display: none;
  3. }
  4.  
  5. #div_whatever1 {
  6. width: 100px;
  7. height: 100px;
  8. background-repeat: no-repeat;
  9. background-position: center center;
  10. background-image: url(PATH_TO_LOW_RES_PHOTO_1);
  11. }
  12.  
  13. #div_whatever2 {
  14. width: 200px;
  15. height: 200px;
  16. background-repeat: no-repeat;
  17. background-position: center center;
  18. background-image: url(PATH_TO_LOW_RES_PHOTO_2);
  19. }

HTML

  1. <div id="div_whatever1"></div>
  2. <img id="img_whatever1" class="img_highres" src="PATH_TO_HIGH_RES_PHOTO_1">
  3.  
  4. <div id="div_whatever2"></div>
  5. <img id="img_whatever2" class="img_highres" src="PATH_TO_HIGH_RES_PHOTO_2">

JQUERY

  1. $(function() {
  2. $(".img_highres").off().on("load",function() {
  3. var id = $(this).attr("id");
  4. var highres = $(this).attr("src").toString();
  5. var target = "#div_" + id.substring(4);
  6. $(target).css("background-image","url(" + highres + ")");
  7. });
  8. });

发生什么事:

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

猜你在找的HTML相关文章