I have a website and based on language en, sq or el, I want to change image source. So I have a folder named screenshots then there are three folders: en , sq and el.
For example the URL for a picture named 'slide-phone.png' is:
img/screenshots/en/slide-phone.png
img/screenshots/sq/slide-phone.png
img/screenshots/el/slide-phone.png
On the html text I have a prameter : {{ _('en') }} that can have one of those value: en , sq and el. In this case is en.
<html lang="{{ _('en') }}">
<head>
<script type="text/javascript">
img_url = 'img/screenshots/'+"{{ _('en') }}"+'/slide-phone.png';
console.log("img is:" , img_url);
$('#slide-phone-img').attr('src',img_url);
</script>
The HTML div is like this:
<img id="slide-phone-img" src="" >
The console gives the right link: img is: img/screenshots/en/slide-phone.png but the src attribute is empty!
Why is happening this, I don't get it, can someone help me?
I have a website and based on language en, sq or el, I want to change image source. So I have a folder named screenshots then there are three folders: en , sq and el.
For example the URL for a picture named 'slide-phone.png' is:
img/screenshots/en/slide-phone.png
img/screenshots/sq/slide-phone.png
img/screenshots/el/slide-phone.png
On the html text I have a prameter : {{ _('en') }} that can have one of those value: en , sq and el. In this case is en.
<html lang="{{ _('en') }}">
<head>
<script type="text/javascript">
img_url = 'img/screenshots/'+"{{ _('en') }}"+'/slide-phone.png';
console.log("img is:" , img_url);
$('#slide-phone-img').attr('src',img_url);
</script>
The HTML div is like this:
<img id="slide-phone-img" src="" >
The console gives the right link: img is: img/screenshots/en/slide-phone.png but the src attribute is empty!
Why is happening this, I don't get it, can someone help me?
Share Improve this question asked Mar 1, 2016 at 10:20 EgzEstEgzEst 3613 gold badges6 silver badges15 bronze badges 2-
6
try wrapping your code in
$(document).ready(function() { ... your code here ... });– Latheesan Commented Mar 1, 2016 at 10:21 -
I think the prefered method to set attributes is to use
propsee example below.attr()also works fine. – Latheesan Commented Mar 1, 2016 at 10:27
3 Answers
Reset to default 6As per my ment, you need to wrap the code in $(document).ready(); closure.
Working example:
<html>
<head>
<script type="text/javascript" src="http://code.jquery./jquery-1.12.1.min.js"></script>
<script type="text/javascript">
// When document is loaded
$(document).ready(function()
{
img_url = 'https://www.google.co.uk/logos/doodles/2016/st-davids-day-2016-5676738174517248-hp.jpg';
$('#slide-phone-img').prop('src', img_url);
});
</script>
</head>
<body>
<img id="slide-phone-img" src="" >
</body>
</html>
Note: .prop() vs .attr() (why im using prop)
Just get html attribute "lang" value and change image src according to that value.
$(document).ready(function(e){
var language = $('html').attr('lang');
if(language == "en"){
var img_src = "img/screenshots/en/slide-phone.png";
$('#slide-phone-img').attr('src',img_src);
}
else if(language == "sq"){
var img_src = "img/screenshots/sq/slide-phone.png";
$('#slide-phone-img').attr('src',img_src);
}
else{
var img_src = "img/screenshots/el/slide-phone.png";
$('#slide-phone-img').attr('src',img_src);
}
});
You need to execute your script once the document is ready. For example by wrapping it in a $(document).ready handler:
$(document).ready(function()
{
img_url = 'https://www.google.co.uk/logos/doodles/2016/st-davids-day-2016-5676738174517248-hp.jpg';
$('#slide-phone-img').attr('src', img_url);
});
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744359977a4570420.html
评论列表（0条）