Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 310
  • Last Modified:

Avoiding an empty SRC attribute

I have a page at http://mauitradewinds.com/Test/StWVT.htm which has an empty src attribute (src="").   Because of the javascript plugin, and also a media query to serve a smaller image on iPhone, it seems I can't fill that src attribute without freezing, or disappearing the virtual tour.  I'm concerned that some browsers may behave poorly in response to an empty src attribute, and wondering if there is an alternative.

I prefer not to start over with a different plugin for the scrolling image.
0
ddantes
Asked:
ddantes
  • 15
  • 15
1 Solution
 
GaryCommented:
Use a background image on a div/span instead of an image.
0
 
ddantesAuthor Commented:
Thank you.  Could you please provide some specific code for that?
0
 
GaryCommented:
<div id="imagediv"></div>
<style>
#imagediv {
background:url('/somimage.jpg');
height:100px;
width:100px;
}
</style>

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
ddantesAuthor Commented:
I'm unsophisticated at coding -- sorry!  Here is the relevant code section of the page.  I don't see how to apply what you have instructed, in order to avoid the empty src attribute...

<ul id=scroller>
     <li><img id="image1" src="" Alt=""  Title="Pause Virtual Tour"></li>
</ul>

<script type="text/javascript">
if ((navigator.userAgent.indexOf('iPhone') != -1)) {
    document.getElementById("image1").src="images/StWVTsmall.jpg";
} else {
    document.getElementById("image1").src="images/StWVT.jpg";
}
</script>
0
 
GaryCommented:
<ul id=scroller>
     <li><div id="image1"  Title="Pause Virtual Tour"></div></li>
</ul>

<script type="text/javascript">
var imgsrc= document.getElementById('image1');

if ((navigator.userAgent.indexOf('iPhone') != -1)) {
    imgsrc.style.background="images/StWVTsmall.jpg";
} else {
    imgsrc.style.background="images/StWVT.jpg";
}
</script> 

Open in new window

You will need to give the div a width and height.
0
 
ddantesAuthor Commented:
Thank you.  I did my best to copy that code to where it belongs, but nothing appears on the page, except the background.  http://mauitradewinds.com/Test/StWVTx.htm
0
 
GaryCommented:
Page Not Found
0
 
ddantesAuthor Commented:
I click that link and I see an empty page with beige, textured background.
0
 
GaryCommented:
Replace
<script type="text/javascript">
var imgsrc= document.getElementById('image1');

if ((navigator.userAgent.indexOf('iPhone') != -1)) {
    imgsrc.style.background="images/StWVTsmall.jpg";
} else {
    imgsrc.style.background="images/StWVT.jpg";
}
</script> 

Open in new window


with
<script type="text/javascript">
if (navigator.userAgent.match(/(iPhone)/)) {
$('#image1').css("background-image","url('images/StWVTsmall.jpg')")
} else {
$('#image1').css("background-image","url('images/StWVT.jpg')")
} 
</script> 

Open in new window

0
 
ddantesAuthor Commented:
Thank you for persisting.  After the replacement, there is a momentary icon for a missing image, then just background.
http://mauitradewinds.com/Test/StWVTx.htm
0
 
GaryCommented:
You need to set an height/width
If you need to do this when setting the background then just add etc

$('#image1').css("height","100px")
0
 
ddantesAuthor Commented:
http://mauitradewinds.com/Test/StWVTx.htm     Nice!   Thanks for your patience.
I overlooked something about the <noscript> tag, but it's working now.
0
 
ddantesAuthor Commented:
Gary:  on iPhone there are two scolling images, one above the other.
0
 
GaryCommented:
Weird...
Try moving the scroller js below the navigator js.
I cannot see any reason for the two scrollers, and it's a bit hard to debug on an iphone.

There's also a stray > tag before your tracking code
0
 
ddantesAuthor Commented:
Moving that scroller js resulted on no image on the page.  I removed the stray >.
0
 
GaryCommented:
Looking at the source the ul is appearing twice - why I don't know...?
0
 
GaryCommented:
Change the code to this and let me know when done, it maybe a bug with the scroller and using a div but doesn't explain why it works in desktop browsers.

<ul id=scroller>
     <li><img id="image1" src="" Title="Pause Virtual Tour"></li>
</ul>

<script type="text/javascript">
if (navigator.userAgent.match(/(iPhone)/)) {
$('#image1').attr("src","images/StWVTsmall.jpg")
} else {
$('#image1').attr("src","images/StWVT.jpg")
}
</script>
0
 
ddantesAuthor Commented:
OK, it's done.
0
 
GaryCommented:
Must be a bug (iphone/safari) that it only hides a cloned img and nothing else
You will have to stick with an img and use a blank 1px image as a src when the page is initialised.
0
 
ddantesAuthor Commented:
Understood.  However, when I tried loading a 1px transparent png in that src attribute, the scroller didn't appear on desktop or iPhone.

It seems, if there is no actual image, but only a reference to one, then the scroller works.  So, which is the lesser evil:  a broken link to a missing image, or an empty src attribute?
0
 
ddantesAuthor Commented:
Gary: just checking to see if you got my last comment?
0
 
GaryCommented:
Was busy - back now, was just thinking why not use a panorama viewer instead of a slider?
Will look back at the code now.
0
 
GaryCommented:
Try this for src
data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D

If that doesn't work then try
#

Will keep looking at it.
0
 
ddantesAuthor Commented:
They both work, so I opted for "#".

Thanks for sticking with the question after points were already awarded.
0
 
GaryCommented:
Stick with the first one, the second one makes a call for the image (that doesn't exist)

Also why not use a panorama viewer?
0
 
ddantesAuthor Commented:
OK, but link validators report "unrecognized protocol" with that code.  Is that acceptable?

Regarding panorama viewers, I've tested tens of alternative methods of displaying this.  It's a large image, and the cross-browser performance of this plugin seems to outperform.
0
 
GaryCommented:
What link validators?
Base64 (data:image) is totally valid html.
0
 
ddantesAuthor Commented:
Yes, W3C validates the code.  But when I check links with Inspyder InSite, for example, it reports that error.  If it's not going to create any nuisance for visitors, I'm OK with that.
0
 
GaryCommented:
Don't worry about it, it's just expecting a url.
0
 
ddantesAuthor Commented:
Good news.  Thanks.
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

  • 15
  • 15
Tackle projects and never again get stuck behind a technical roadblock.
Join Now