Question

这里我尝试使用jquery下载图像并将下载的图像添加到DOM。要检查图像是否已加载，请使用＆＃34; https://github.com/desandro/imagesloaded＆＃34;

为此我采取了临时div（temp-images-div）并在那里添加图像。然后我将src替换为实际的div（multimedia-div）。

function populateImageResults(allImagesData) {
    // populate response data for later use 
    responseData = allImagesData;

    //append html as hidden element to body 
    var html = '';
    jQuery.each(responseData, function(index, val) {
        html += '<img id=\"image-'+index+'" src="'+val.THUMBURL+'">';
    });
    html = '<div id="temp-images-div" style="display:none">'+ html + '</div>';
    $('body').append(html);

    $('img[id^="image-"]').imagesLoaded()
        .progress(function (instance, image) {
            var imgId = image.img.id;
            if (image.isLoaded) {
                var imgSrc = image.img.src;
                $('#lemmon-slider-id  ul').append('<li><img id="'+imgId+'" src="'+imgSrc+' style="height:100px"></li>');
            } else {
                // if image not loaded then store broken image id into array
                brokenImageIDs.push(imgID);
            }
        })
        .always(function() {
            // always event will be triggered after all images have been either loaded or confirmed broken
            // currently do nothing
            // FIXME - load broken images here

        });

    // delete temporary div '#temp-images-div'
    jQuery("#temp-images-div").remove();

    // display multimedia div
    jQuery('#multimedia-div').css('display','block');
}

现在我正在检查图像正在加载两次。但我想使用预加载的图像。我可以理解为什么它加载了两次，但我不想要这个。

所以我的问题是如何使用已加载的图像？我需要保持html的结构类似于上面的jquery代码中提供的。

<Ul>
<li><img ..></li>
<li><img ..></li>
....
...
</ul>

如何使用预加载的图像并添加到DOM

0 个答案: