强制图像完全加载

Question

我对网络开发还很陌生，所以请原谅我的无知。我正在制作一个生成色样的页面，这些色板只是高分辨率图像的一小部分。一次生成多达70个这样的样本。我的问题是我无法在第一次尝试时完全显示图像，我必须再次调用该函数以使图像完全加载。如果我设置一个函数，使我的样本在加载时可见（我使用JQuery的.load）它永远不会触发，我假设因为它从未真正加载。有没有办法强制装满大量内容的页面？

function showswatches(section, xmlHttpObj){
    for(i=0;i<xmlHttpObj.length;i++){
        if(xmlHttpObj[i].getElementsByTagName('section')[0].childNodes[0].nodeValue == section){
            $('#swatches').html();
            var colors = xmlHttpObj[i].getElementsByTagName('color');
            for(j=0;j<colors.length;j++){
                $('#swatches').append('<div class="swatch">');
                $('#swatches').append('<img src='+colors[j].childNodes[0].nodeValue+'>');
                $('#swatches').append('</div>');
            }
        }
    }
}

Answer 1

我可以给你两个选择 -

---

第一个选项 -

为每个图像添加一个.load()处理程序，只有在图像完全加载后才会显示图像（同时显示一个加载程序的图像）。如果您将所有图像都放在同一个类中，那么您可以立即将事件附加到所有图像上。例如，如果您的所有<img>元素都包含preloadImg类，并且在swatch容器div中放置了一个小的加载器元素，则可以创建一个这样的处理程序 -

$('img.preloadImg').on('load',function(){
  $(this).parent().find('loader').hide(); // hide loader
  $(this).show();  // images initially hidden
});

---

第二个选项 -

您可以使用JavaScript预加载样本，以便在加载整个文档之前开始加载，jQuery将触发document.ready回调。为此，您只需创建一个JavaScript Image()对象数组，并为每个对象提供适当的src属性。

var imagePaths = ['swatch1.png','swatch2.png','swatch3.png'];
var imageLoader = new Array();
for(var i=0;i<imagePaths.length;i++){
  var img = new Image();
  img.src = imagePaths[i];
  imageLoader.push(img);
}

一旦你创建了Image()对象并给它一个src属性，图像就会开始加载，这可能会减少你的加载时间，因为我之前说过，图像将开始加载只要JavaScript可用 - 在jQuery加载之前，甚至在加载完整的HTML内容之前。