Images don't load in html
I'm loading new HTML/JS content using ajax and appending it to some div block
The problem is that new (received) code contains of some image-tags and they aren't visible after loading. When I directly copy addresses of images and check them - everything is okay.
For example, in received code there is:
<img srс="http://capitalpay.co.uk/images/vending/1.png" />
Picture loads fine directly, but look at example page here.
It's unavailable. Maybe I have to preload images in received code using JS?
UPD:
$.post('loadPage.php', {page: currentPage}, function(data) {
$('#TextInside').html(data);
});
UPD2:
Response:
<H2>Vending machine</H2>
The vending machine is designed to serve the participants in the system with the possibility of receiving and issuing banknotes.<br />
With the help of party system can:<br />
<p>
- Make purchases at any online store<br />
- Provide additional services and services provided by the system
</p>
With the help of an agent system can:<br />
<p>
- Register participants in the system<br />
- Make purchases at any online store<br />
- Provide additional services and services provided by the system.
</p>
<img srс="http://capitalpay.co.uk/images/vending/1.png" style="width: 50%; height: 50%" />
<div id="pageContainer" style="margin: 0 auto; width: 90%">
<!-- Slideshow HTML -->
<div id="slideshow">
<div id="slidesContainer">
<div class="slide">
<h2>Web Development Tutorial</h2>
<p><img srс="http://capitalpay.co.uk/images/vending/1.png" style="width: 50%; height: 50%" />
If you're into developing web apps, you should check out the tutorial called "<a href="http://sixrevisions.com/tutorials/web-development-tutorials/using-xampp-for-local-wordpress-theme-development/">Using XAMPP for Local WordPress Theme Development</a>" which shows you how to set up a local testing server for developing PHP/Perl based applications locally on your computer. The example also shows you how to set up WordPress locally!</p>
</div>
<div class="slide">
<h2>Grunge Brushes, Anyone?</h2>
<p><img srс="http://capitalpay.co.uk/images/vending/2.png" width="516" height="305" />In this layout, I used <a href="http://sixrevisions.com/freebies/brushes/sr-grunge-free-high-resolution-photoshop-grunge-brushes/">SR Grunge</a>, which is a free set of high-resolution Photoshop brushes you can download here on Six Revisions.</p>
<p>
</div>
<div class="slide">
<h2>How About Some Awesome Grunge Textures?</h2>
<p><img srс="http://capitalpay.co.uk/images/vending/3.png" width="516" height="305" />The texture used in this web page is from the Grunge Extreme Textures freebie set by JC Parmley released here on Six Revisions.</p>
<p>You can head over to the <a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/">Grunge Extreme</a> page to download the texture set or check out Six Revisions' <a href="http://sixrevisions.com/category/freebies/">freebie section</a> for even more goodies!</p>
</div>
<div class="slide">
<h2>'Tis the End, My Friend.</h2>
<p><img srс="http://capitalpay.co.uk/images/vending/4.png" width="516" height="305" />This is the last slide. Hit the left arrow control to go back to the other slides.</p>
<p>Alternatively, you may want to check out the tutorial on how to create a simple and cool button in Photoshop called "<a href="http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/">How to Create a Slick and Clean Button in Photoshop</a>" which was inspired by the <a href="http://www.campaignmonitor.com/designer/?utm_source=sixrevisions&utm_medium=banner&utm_term=2&utm_content=0003&utm_campaign=Apr09Banners">Campaign Monitor</a> web interface.</p>
</div>
</div>
</div>
<!-- Slideshow HTML -->
</div>
<script language="javascript">
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 650;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');
// Hide left arrow control on first load
manageControls(currentPosition);
// Create event listeners for .controls clicks
$('.control')
.bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
});
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
开发者_如何学运维 // Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}
});
</script>
UPD:
Yeah, the problem was in src
. Latin 'c' and Cyryllic 'c' are at the same key at the keyboard. Just typing mistake.
Tehre is no need to preload images when you load code into your page.
It's not a problem with including the code in the page using AJAX. There is some problem with the html code itself.
If you put that image tag directly in a web page it won't load either: http://jsfiddle.net/fNNG8/
There is something strange with the c
in src
in the img
tag. If you just delete it and write a new one, it works fine.
See the difference ..... lol, also here
<?php
echo ord('с'); //this 'с' is copied from above text.
echo "<br/>";
echo ord('c');
Result
209
99
精彩评论