Question

以下Javascript旨在预加载图像，将div的背景设置为图像，然后淡化整个div ...

$("<img/>")
    .attr("src", "../services/imageResize.php?img=" + img + "&width=150")
    .load(function(e){
        $("<div/>", {
            class: "smallThumb"
        })
        .css("background", "url(" + $(this).attr("src") + ") no-repeat center center")
        .appendTo(images)
        .fadeIn(500);

        if(count == imgTotal)
        {
            loadingImages = false;
            images.css("background","#fff");
        }
    });
count++;

我在Chrome和Safari中测试了它;两者都淡入div然后完成加载图像。我很困惑于是什么导致它重新加载.css语句的图像。

Answer 1

您是否尝试将图像硬编码到隐藏的页面中并查看会发生什么？部分问题在于您传递的URL参数可能会使图像彼此独特。

Answer 2

这是两件不同的事情。 HTML DOM和CSS，它会加载两次。他们俩彼此都不太了解。仅仅因为你使用相同的src“字符串”并不意味着他们使用相同的src图像内容。我会测试它，将图像src设置为单个像素类型的东西，然后加载背景。这是一个记录良好的CSS背景图像方法。此外，缓存可以帮助它至少不从服务器请求两次。无论如何要做好事。

Answer 3

我认为您的问题是onload事件在图像完全加载之前触发。 如果您假设图像已完全加载，则会显示它正在重新加载。

只要bowser准备好渲染图像，img.onload就会触发。没有任何保证图像将被完全加载。测试图像是否完全加载的唯一方法是使用img.complete属性。

前段时间我回答了问题How to monitor an image source for fully loaded status

在答案之后我写了一点jQuery plugin which utilizes the complete attribute。

你可以像使用它一样使用它。

$(function () {
    $.preload('your-image.png').progress(function (img) {
        // set background
        $('body').css('background', 'url(' + img.src + ')');
    });
});

Javascript重新加载预加载的图像

3 个答案: