1

以下 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 语句重新加载图像。

4

3 回答 3

0

我认为您的问题是onload事件在图像完全加载之前触发。如果您假设图像已完全加载，它将看起来像是在重新加载。

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

前段时间我回答了如何监控图像源的满载状态的问题

回答后我写了一个利用complete属性的小 jQuery 插件。

你可以像这样使用它

$(function () {
    $.preload('your-image.png').progress(function (img) {
        // set background
        $('body').css('background', 'url(' + img.src + ')');
    });
});
于 2013-05-27T18:18:53.847 回答
0

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

于 2013-05-27T17:36:51.810 回答
0

是两种不同的东西。HTML DOM 和 CSS，它会加载两次。他们俩其实并不了解对方。仅仅因为您使用相同的 src“字符串”并不意味着它们使用相同的 src 图像内容。我会将图像 src 设置为单像素类型的东西进行测试，然后加载背景。这是一个有据可查的 CSS 背景图像方法。缓存也可以帮助它至少不会从服务器请求两次。无论如何都是一件好事。

于 2013-05-27T17:38:40.130 回答