预加载背景图片，使用一个临时的gif图像

13 浏览
0 Comments

预加载背景图片，使用一个临时的gif图像

我有一些带有背景图像的div。我想知道如何使用gif图像预加载这些背景图像，因为其中一些背景图像相当大。以下操作无效：\nHTML：\n

甘露酸剥皮 内容
面部护理 内容

\nCSS：\n

#glykopeels{
        background: #ebebeb url(http://lamininbeauty.co.za/images/products/preloader.gif) no-repeat top right;
        background-size: contain;
    }
#facials{
    background: #ebebeb url(http://lamininbeauty.co.za/images/products/preloader.gif) no-repeat top right;
    background-size: contain;
    }

\nJS：\n

function loadImage(){
        document.getElementById('glykopeels').style.background = '#ebebeb url(http://lamininbeauty.co.za/images/products/glykopeel.jpg);';
    }
function loadImage2(){
        document.getElementById('facials').style.background = '#ebebeb url(http://lamininbeauty.co.za/images/products/facial.jpg);';
    }

\n我猜在onload函数中为该元素定义一个不同的ID，并为该新ID定义css是另一种可能性？因此，仅更改onload函数中该元素的ID？\n谢谢

0

3 答案

0 Comments

问题的出现原因：

这段代码的目的是在背景图像加载后切换到大的JPG图像，但问题是在

元素的onLoad事件中调用了loadImage()函数，而不是在元素的onLoad事件中调用。因此，代码中的onLoad事件不会按照预期工作。

解决方法：

将loadImage()函数的调用从

元素的onLoad事件中删除，并将其添加到元素的onLoad事件中。

整理成的文章如下：

当背景图像加载后切换到大的JPG图像时，你可以尝试对代码进行如下修改：
<html>
  <head>
    <title>Image Load Test</title>
    <script type="text/javascript">
      function loadImage(preloader, imageDiv) {
        document.getElementById(imageDiv).style.background = '#ebebeb url('+preloader.src+') no-repeat top right';
        document.getElementById(imageDiv).style.backgroundSize = 'contain';
      }
    </script>
    <style type="text/css">
      #testImage {
              background: #ebebeb url(small-image.gif) no-repeat top right;
              background-size: contain;
      }
      #preloads { display: none; }
    </style>
  </head>
  <body>
    <div id="testImage">Some Content</div>
    <div id="preloads">
      <img src="full-image.jpg" onload="loadImage(this, 'testImage')">
    </div>
  </body>
</html>





这段代码的区别在于，我在一个带有"display: none"属性的


中预加载了JPG图像。我不确定div上的onLoad事件具体功能，但我非常确定这不是你想要的。将onLoad事件放在元素中会在图像完全加载后触发。


有关代码中的preloader变量的定义问题。在loadImage()函数的参数列表中定义了preloader变量。当调用这个函数时，preloader变量会被设置为第一个参数/形参的值，并且只能在函数内部访问。


然而，我不理解在onload事件中在


中调用没有参数的loadImage()的目的是什么。


关于testImage元素中的onload事件，你是对的！我复制并粘贴了原始问题中的代码，然后在修改代码时显然忘记删除那部分。感谢你指出这一点，现在已经删除了！


正如wecsam已经解释过的，preloader被定义为loadImage函数的一个参数：function loadImage(preloader, imageDiv)。通过在每个图像上加载一个onLoad事件，可以在图像逐个加载时更新图片，而不是等待所有图像加载完毕后一次性更新。


如果可能的话，你能否将你的想法放进一个fiddle中呢？


另外，我理解到在标签的onload函数开始时，document.getElementById(imageDiv).style.background基本上会被替换成参数“preloader”？


当在中调用loadImage(preloader, imageDiv)时，关键字this作为preloader参数传入。在这种情况下，this是一个特殊的关键字，表示调用事件的元素。然后，loadImage函数使用preloader作为对的引用，以获取图片的URL，并将其设置为


的背景图片。

									

				

									

			

			
0
0 Comments

Preloading a background-image with a temporary gif image

在网页开发中，有时候我们需要在页面加载完成之前预加载一些图片，以提高用户的体验。然而，在某些情况下，当我们尝试预加载背景图片时，可能会遇到一些问题。下面是一个描述了这个问题以及解决方法的讨论。

问题的出现原因是

元素没有load事件，这个事件只适用于body、图片和脚本标签。虽然在HTML规范中，所有元素都有onload事件，但主要浏览器尚未支持这个事件。

解决方法是将加载图片的代码放在html页面的末尾，然后创建一个函数来加载图片并设置背景图片。代码如下：

function loadImages() {
    var glykopeels = document.getElementById('glykopeels');
    var facials = document.getElementById('facials');
    glykopeels.style.backgroundImage = 'url(http://lamininbeauty.co.za/images/products/glykopeel.jpg)';
    facials.style.backgroundImage = 'url(http://lamininbeauty.co.za/images/products/facial.jpg)';
}

另外需要注意的是，当设置style.background时，不要在字符串末尾加上分号，否则将无法正常工作。

然而，经过测试发现，当浏览器接收到新图片的第一个字节时，会将加载器gif从背景中移除，导致加载器图片无法显示。为了解决这个问题，我们可以使用另一种方法来预加载背景图片。

下面是一个加载图片并将其设置为指定id元素背景的函数：

function loadImageToBackground(elementId, imageUri) {
    var img = new Image();
    img.onload = function() {
        document.getElementById(elementId).style.backgroundImage = "url('" + imageUri + "')";
    };
    img.src = imageUri;
}

然后，在需要显示加载器的元素上调用这个函数，传入元素id和图片url。例如：

loadImageToBackground('glykopeels', 'http://image....');

这样，当图片加载完成后，就会将其设置为指定元素的背景。这个函数可以根据需要进行扩展和添加更多功能。

在这个解决方法中，我们通过先将图片加载到缓存中，然后在图片加载完成后将其设置为背景图片，来解决预加载背景图片的问题。

希望这个解决方法对你有帮助！你可以在以下链接中找到一个使用这个方法的工作示例：[http://jsfiddle.net/pjyH9/19/](http://jsfiddle.net/pjyH9/19/)（该示例加载了两张大小为1.5mb的图片，以便你可以看到加载器的效果）。

以上就是关于如何使用临时gif图片预加载背景图片的问题出现原因以及解决方法的讨论。希望对你有所帮助！

0
0 Comments

Preloading a background-image with a temporary gif image

在这个问题中，原因是div没有onload属性，其次是在url中应该使用引号包裹，第三个原因是没有一个叫做preloader.gif的图片，而是有一个叫做loader.gif的图片，所以作者使用了loader.gif来修复css部分。解决方法是编写一个自定义函数，该函数可以在图片加载完毕后调用，并将背景图片替换成新加载的图片。函数接受两个参数，第一个是要选择的属性，第二个是要限制的标签名。在BODY中，需要为要使用这种技术的元素添加一个data-bg_img属性，该属性包含你的背景图片的URL。然后在BODY中触发replace background函数，当加载图片时，会调用replace background函数。这个函数会搜索body中与第二个参数或*匹配的元素，然后使用第一个参数对它们进行过滤。对于每个在过滤后的元素集合中的html对象，都会创建一个新的图片，并将html对象的属性值（URL）作为图片源，以及html对象集合的引用id（属性data-id）作为参考。当这些图片加载完成时，它们会触发它们的onload事件，调用replace background的exec方法，用新加载的背景图片替换html对象的背景（和其他CSS）。这样就实现了背景图片的预加载。

0