Question

如果您从顶部导航转到“住宅”选项，然后单击左侧子菜单项（浴室，厨房等）中的任何项目。主要div，Residences的内容到达，背景图像将改变。

JS：

$('.resMenu li a').click(function(){
var href = $(this).attr('bckimg');
$('.resMenu li a').removeClass('clicked');
$(this).addClass('clicked');
var num = $(this).attr('rel');
var image = $('#section-2');
image.fadeOut(500, function () {
    image.css({
        'background':'url('+href+') center top no-repeat',
        'background-size':'cover'
    });
    image.fadeIn(500);
});
});

用于预加载图像的JS：

// Array of images:
var imageArray = [
'<?php bloginfo('template_url');?>/images/resi-1.jpg', 
'<?php bloginfo('template_url');?>/images/resi-2.jpg', 
'<?php bloginfo('template_url');?>/images/resi-3.jpg'
                ];

// Loop through and declare an element that will not actually be used.
$.each(imageArray, function (i, val) {
  $('#alwaysHide').append('<img src="'+ val +'">')
});

它的作用是，它使页面变白（淡入淡出效果也不起作用），而过渡正在发生。我查看了之前提到的与此相关的问题，但是他们总是有一个标签或者css是预定义的，这对我来说不可能在这里做。有什么想法可以避免白色闪光？

Answer 1

它变白，因为那是背景颜色。需要加载图像。这就是它显示背景的原因，因为在加载之前没有图像。

如果您想避免这种情况，则需要使用Javascript预加载图片。

浏览器第一次加载图像，但第二次加载图像，这就是为什么它只在您第一次访问该部分时显示白色。

动态分配的背景图像之间的交叉渐变没有白色闪光

1 个答案: