在Phonegap中的onclick事件期間更改圖像

Question

在我的移動應用程序中，我想在用戶點擊圖像時對其進行更改。 因此，使用指令可以在觸發touchstart時向該元素添加一個類，並在觸發touchend事件時將其刪除。 此類僅包含：內容：url（“ ../ img / image_active.png”）;

這可以工作，但是第一次啟動應用程序時，加載新圖像會花費一些時間，因此，當我單擊圖像時，有一會兒（幾毫秒），我無法顯示任何圖像。 這僅是第一次附加。

我該如何解決這個問題？

Answer 1

您可以在加載應用程序時加載img，並通過javascript更改樣式內容。

window.addEventListener('load', function(){
    if (document.images) {
        img1 = new Image();

        img1.src = "path/from/img.png";
    }
    var element = document.getElementById('element');
    element.addEventListener('touchstart',function(){
       element.style.content = 'url("'+img1.src+'")';
    },false);
    element.addEventListener('touchend',function(){
        element.style.content = '';
    },false);
},false);

我認為這會起作用。