image src transitions появляется для пользователя

Я делал простой дизайн для приложения мобильного телефона, и я просто хотел изменить src изображения в div в соответствии с определенным событием клика, но этот src находится в другом div и когда src изменяется в соответствии с щелчком перехода между предыдущим src изображения и следующего src для пользователя, и я просто не хочу, чтобы в приложении было такое Defoe.image src transitions появляется для пользователя

Итак, все, что мне нужно, это сделать src изменения при переходе на другую DIV из приложения, не позволяя пользователь известить об такой вещи

.... Вот мой HTML, CSS, JavaScript

document.getElementById("Golds").addEventListener('touchstart', function(){ 
 
\t window.location.href='#loginpage'; 
 
\t var x= document.getElementById("GymLogin"); 
 
\t x.src="goldsgymlogo.png"; 
 
\t x.style.display = "inline"; 
 
}); 
 
document.getElementById("Titans").addEventListener('touchstart', function(){ 
 
\t window.location.href='#loginpage'; 
 
\t var x= document.getElementById("GymLogin"); 
 
\t x.src="Titans.jpg"; 
 
\t x.style.display = "inline"; 
 
}); 
 
document.getElementById("Smart").addEventListener('touchstart', function(){ 
 
\t window.location.href='#loginpage'; 
 
\t var x= document.getElementById("GymLogin"); 
 
\t x.src="smart.png"; 
 
\t x.style.display = "inline"; 
 
}); 
 
document.getElementById("SamiaAllouba").addEventListener('touchstart', function(){ 
 
\t window.location.href='#loginpage'; 
 
\t var x= document.getElementById("GymLogin"); 
 
\t x.src="Samia-Allouba.jpg"; 
 
\t x.style.display = "inline"; 
 
}); 
 
document.getElementById("Fibers").addEventListener('touchstart', function(){ 
 
\t window.location.href='#loginpage'; 
 
\t var x= document.getElementById("GymLogin"); 
 
\t x.src="fibers.jpg"; 
 
\t x.style.display = "inline"; 
 
});

/* 
 
Thats My CSS 
 
*/ 
 

 
#GymLogin{ 
 
\t display: none; 
 
\t margin-left:30%; 
 
\t margin-top:15%; 
 
\t max-width:135px; 
 
\t max-height:135px; 
 
}

<!--HTML CODE HERE--> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Phone Gap trial</title> 
 
<link rel= 'stylesheet' href='css/bootstrap.css' /> 
 
<link rel= 'stylesheet' href='css/font-awesome.min.css' /> 
 
<link rel= 'stylesheet' href='css/style.css' /> 
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"> 
 
<script type="text/javascript" charset="utf-8" src="cordova.js"></script> 
 
<script type="text/javascript" charset="utf-8" src="childbrowser.js"></script> 
 
<script type="text/javascript" charset="utf-8" src="Torch.js"></script> 
 
</head> 
 

 
<body> 
 
<div id="start" class="ourteam text-center"> 
 
\t <!--start container--> 
 
\t <div class="team"> 
 
\t <section class="header"> 
 
\t \t <div> 
 
\t \t <h1>Train & Game</h1> 
 
\t \t </div> 
 
\t \t </section> 
 
\t \t <div class="container"> 
 
\t \t 
 
\t \t \t <div class="row"> 
 

 
\t \t \t <div class="col-xs-4"> 
 
\t \t \t <div class="person"> 
 
\t \t \t <img id="Golds" class="teamphotos img-circle" src="img\goldsgymlogo.png"/> 
 
\t \t \t <h6>Gold's Gym</h6> 
 
\t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="col-xs-4"> 
 
\t \t \t <div class="person"> 
 
\t \t \t <img id="Titans" class="teamphotos img-circle" src="img\Titans.jpg"/> 
 
\t \t \t <h6>Titans Gym</h6> 
 
\t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="col-xs-4"> 
 
\t \t \t <div class="person"> 
 
\t \t \t <img id="Smart" class="teamphotos img-circle" src="img\smart.png"/> 
 
\t \t \t <h6>Smart Gym</h6> 
 
\t \t \t </div> 
 
\t \t \t </div> 
 

 
\t \t \t </div> 
 
\t \t \t <br> 
 
\t \t \t <div class="row"> 
 
\t \t \t 
 
\t \t \t <div class="col-xs-6"> 
 
\t \t \t <div class="person"> 
 
\t \t \t <img id="SamiaAllouba" class="teamphotos img-circle" src="img\Samia-Allouba.jpg"/> 
 
\t \t \t <h6>Samia Allouba</h6> 
 
\t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="col-xs-6"> 
 
\t \t \t <div class="person"> 
 
\t \t \t <img id="Fibers" class="teamphotos img-circle" src="img\fibers.jpg"/> 
 
\t \t \t <h6>Fibers Gym</h6> 
 
\t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t </div> 
 

 
\t \t \t </div> 
 
\t \t \t <!--end container--> 
 
\t </div> 
 
\t <!--end team--> 
 
\t </div> 
 
<!--Our team div end--> 
 

 

 

 
<!-- Start Login Page --> 
 
<div data-role="page" id="loginpage" onblur="deletesrc()"> 
 
\t \t <img id="GymLogin" class="img-circle" src=""/> 
 
     <input type="text" size="15" id="Usernameinput" placeholder="Username"> 
 
     <span id="asterisk1" class="asterisk"> </span> 
 
     <input type="password" id="Passwordinput" placeholder="Password"> 
 
     <span id="asterisk2" class="asterisk"> </span> 
 
    <button class="btn btn-danger" id="GymName">Omar</button> 
 
</div> 
 
<!-- End Login Page --> 
 
<script src="js/jquery-2.1.4.min.js"> </script> 
 
<script src="js/jquery.mobile-1.4.5.min.js"> </script> 
 
<script src="js/bootstrap.min.js"> </script> 
 
<script src="js/index.js"></script> 
 
</body> 
 
</html>

источник

2015-10-08 Omar Abdel Meneim Zaki

Хотя есть намного лучшие способы сделать то, что вы пытаетесь сделать, вы можете попробовать это может помочь

Вместо изменения «.src» изображений, просто загружать и скрывать несколько изображений и изменять отображение того, что вы хотите.

Так что ваш HTML becoms

<img id="golds" class="GymLogin img-circle" src="golds..."/> 
<img class="GymLogin img-circle" src="titans..."/> 
<img class="GymLogin img-circle" src="samia..."/> 
<img class="GymLogin img-circle" src="fibers..."/>

Ваш CSS

.GymLogin{ 
    opacity: 0; 
}

Ваш Javascript

document.getElementById("Golds").addEventListener('touchstart', function(){ 
    $('.GymLogin').hide(); 
    $('#golds').show(); 
});

Не пробовал, но вы получите идею.

источник

2015-10-08 07:04:09 MegaAppBear

Хорошо, спасибо, что это сработало, но есть небольшая проблема, так как вы заставили меня загружать изображения 5 раз, поэтому логин для входа теперь больше и есть небольшой переход в div внизу, и это повлияло на мою страницу но буферизация изображения или загрузка работали нормально ,,, так что любая идея, что эта проблема для или как ее можно решить!? @MegaAppBear –

Можете ли вы поделиться своим полным css? – MegaAppBear

Прошу прощения за поздний ответ, но это сделано. Большое спасибо, я нашел способ! :) –

image src transitions появляется для пользователя

ответ

Смежные вопросы