0

我对Web开发相当陌生，所以请原谅我的无知。我正在处理一个生成色板的页面，这些色板只是高分辨率图像的一小部分。一次最多可生成 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>');
            }
        }
    }
}
4

1 回答 1

1

我可以给你两个选择——

第一个选项——

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

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

第二种选择——

您可以使用 JavaScript 预加载您的色板，以便它们在您的整个文档被加载并且 jQuery 触发document.ready回调之前开始加载。为此，您可以简单地创建一个 JavaScriptImage()对象数组并为每个对象赋予适当的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 内容之前。

于 2012-08-15T16:14:43.000 回答