Question

在我的网站http://myui.ovh/preprod-magbil/上的“ MES OFFRES”部分中，当我们单击元素（图片更改和背景更改）时，我可以进行平滑过渡，但是平滑过渡仅在我们进行第一次操作后有效点击每个项目，如何避免这种情况，并使其在第一次正确加载？

我在js文件中使用了jquery，并且在我的js代码之上已经有了一个阻止默认值：

$(".item").click(function(event) {

event.preventDefault();
// clique sur a

if ($(this).is("#item-a")) {
    $("#content-b,#content-c,#content-d,#content-e,#content-f").hide();
    $("#content-a").removeClass('hidden');
    $("#content-a").show();
    $('#img-a').attr('src', 'img/img-a-active.png'); /* change  icon*/
    $('.section-grey').css("background-image", "url(img/bg-facepainting.png)"); /* changer background*/
    $('#offer-div-right').css("background-image", "url(../img/facepainting-bg.png)"); /*changer background image */
    $('#offer-div-right').attr('style', 'background-image !important'); /* force the picture to set on the background */


    $('#btn-offre').css("background-color", "#ff6f4c"); /* changer bouton color*/

    $('#img-b').attr('src', 'img/img-a-off.png'); /* put all other icons to default*/
    $('#img-c').attr('src', 'img/img-c-off.png');
    $('#img-d').attr('src', 'img/img-d-off.png');
    $('#img-e').attr('src', 'img/img-e-off.png');
    $('#img-f').attr('src', 'img/img-f-off.png');
}});

这是例如当我们单击第一个项目时的代码

谢谢

Answer 1

单击链接后，正在加载图标，背景和特色图像的图像，因此您会看到闪烁。加载后，您会看到平滑的过渡。有几种方法可以解决此问题，所有方法都与使用css，js或两者同时预加载图像有关。这里有两个可能要考虑的建议。

执行此操作的一种不错的方法，而无需修改代码已经起作用的方式，是使用屏幕外元素预加载图像，以将图像数据放入浏览器缓存中。添加一个绝对位置为-9999 -9999的元素，并将background-image属性设置为您要使用的图像。您可以将其设置为多个图像。为了获得更好的结果，请在页面加载后添加一些JavaScript来呈现这些元素。

另一种实现此目的的方法是让多个元素具有已在站点中渲染的所有图像，然后在过渡过程中淡出不需要的元素并显示所需的元素。

使文件正确加载

1 个答案: