Question

我目前正在使用此脚本来交换图像，因为我需要使用SVG然后使用SVGeezy。

jQuery(function ($) {
    var sourceSwap = function () {
        var $this = $(this);
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource);
    }
    $('img.switch').hover(sourceSwap, sourceSwap);
});

我使用的HTML是

<img class="switch" data-alt-src="<?php bloginfo('template_url'); ?>/img/ost-meetthetribe-rollover.svg" src="<?php bloginfo('template_url'); ?>/img/ost-meetthetribe.svg">

两个不同图像之间存在延迟，因为浏览器仅在用户悬停时加载翻转图像。

所以我从另一个答案中找到了这个小脚本并提出了这个

jQuery(function ($) {
    var sourceSwap = function () {
        var $this = $(this);
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource);
    }
    $('img.switch').hover(sourceSwap, sourceSwap);
});
// Preload:
function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
    });
}
// Usage:
preload([
    'img/ost-whattopack-rollover.svg',
    'img/ost-whattopack-rollover.png',
    'img/ost-whattopack.svg',
    'img/ost-whattopack.png',
    'img/ost-meetthetribe-rollover.svg'
    'img/ost-meetthetribe-rollover.png'
    'img/ost-meetthetribe.svg'
    'img/ost-meetthetribe.png'
]);

所以这根本不起作用。任何想法??

Answer 1

function preload(arrayOfImages) {
    var i = 0;
    $(arrayOfImages).each(function(){
        imageelmentObj = new Image();
        images[i] = imageelmentObj.src = this;
        i++;
    });
}

如何使用图像交换脚本jquery预加载图像

1 个答案: