Jeder:
Ich versuche, die Quell-URLs von Bildern von einer Seite abzurufen und sie in JavaScript auf einer anderen Seite zu verwenden. Ich weiß, wie man Bilder mit JQuery .load () zieht. Anstatt jedoch alle Bilder zu laden und auf der Seite anzuzeigen, möchte ich nur die Quell-URLs abrufen, damit ich sie in einem JS-Array verwenden kann.
Seite 1 ist nur eine Seite mit Bildern:
<html>
<head>
</head>
<body>
<img id="image0" src="image0.jpg" />
<img id="image1" src="image1.jpg" />
<img id="image2" src="image2.jpg" />
<img id="image3" src="image3.jpg" />
</body>
</html>
Seite 2 enthält mein JS. (Bitte beachten Sie, dass das Endziel darin besteht, Bilder in ein Array zu laden, sie zufällig zu sortieren und mithilfe von Cookies alle 10 Sekunden ein neues Bild beim Laden der Seite anzuzeigen. All dies funktioniert jedoch, anstatt die Bildpfade in mein Javascript fest zu codieren Wie unten gezeigt, würde ich es vorziehen, die Pfade von Seite 1 basierend auf ihren IDs zu übernehmen. Auf diese Weise müssen die Bilder nicht immer den Titel "image1.jpg" usw. tragen.)
<script type = "text/javascript">
var days = 730;
var rotator = new Object();
var currentTime = new Date();
var currentMilli = currentTime.getTime();
var images = [], index = 0;
images[0] = "image0.jpg";
images[1] = "image1.jpg";
images[2] = "image2.jpg";
images[3] = "image3.jpg";
rotator.getCookie = function(Name) {
var re = new RegExp(Name+"=[^;]+", "i");
if (document.cookie.match(re))
return document.cookie.match(re)[0].split("=")[1];
return'';
}
rotator.setCookie = function(name, value, days) {
var expireDate = new Date();
var expstring = expireDate.setDate(expireDate.getDate()+parseInt(days));
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}
rotator.randomize = function() {
index = Math.floor(Math.random() * images.length);
randomImageSrc = images[index];
}
rotator.check = function() {
if (rotator.getCookie("randomImage") == "") {
rotator.randomize();
document.write("<img src=" + randomImageSrc + ">");
rotator.setCookie("randomImage", randomImageSrc, days);
rotator.setCookie("timeClock", currentMilli, days);
}
else {
var writtenTime = parseInt(rotator.getCookie("timeClock"),10);
if ( currentMilli > writtenTime + 10000 ) {
rotator.randomize();
var writtenImage = rotator.getCookie("randomImage")
while ( randomImageSrc == writtenImage ) {
rotator.randomize();
}
document.write("<img src=" + randomImageSrc + ">");
rotator.setCookie("randomImage", randomImageSrc, days);
rotator.setCookie("timeClock", currentMilli, days);
}
else {
var writtenImage = rotator.getCookie("randomImage")
document.write("<img src=" + writtenImage + ">");
}
}
}
rotator.check()
</script>
Kann mich jemand in die richtige Richtung weisen? Meine Vermutung ist, JQuery .get () zu verwenden, aber ich war bisher erfolglos.
Bitte lassen Sie mich wissen, wenn ich klären kann!
3 Antworten
Versuche dies.
<script>
$.get('http://path/to/page/1', function(data) {
var imgs = $('<div/>').html(data).find('img');
imgs.each(function(i, img) {
alert(img.src); // show a dialog containing the url of image
});
});
</script>
Ich verstehe nicht, warum Sie dafür Cookies verwenden möchten. Sie sollten Seite 1 abrufen, die Bilder suchen und dann setInterval verwenden, um den src zu aktualisieren.
$.get('page1.html', function(data, status) { // get the page with the images
var parser = new DOMParser();
var xmldoc = parser.parseFromString(data, "text/html"); //turn it into a dom
var imgs = xmldoc.getElementsByTagName('img'); //get the img tags
var imageSrcs = Array.prototype.slice.call(imgs).map(function(img) {
return img.src; //convert them to an array of sources
});
setInterval(function() { // run this every 10 seconds
var imags = document.getElementsByTagName('img'); // find the images on this page
Array.prototype.slice.call(imgs).forEach(function(img) {
var imgSrc = Math.floor(Math.random()*imageSrcs.length); //get a random image source
img.src = imageSrcs[imgSrc]; //set this image to the src we just picked at random
});
}, 10000);
}, 'html');
Warum nicht Ajax verwenden? Sie können den Abschnitt Ihrer externen Seite, der alle Bilder enthält, in einen versteckten Container laden () und dann die benötigten Informationen durch einen Rückruf extrapolieren.
External.html
<html>
....
<div id="imgContainer">
<img id="image0" src="image0.jpg" />
<img id="image1" src="image1.jpg" />
<img id="image2" src="image2.jpg" />
<img id="image3" src="image3.jpg" />
</div>
</html>
Ajax.js
function ajaxContent(reg, extReg) {
var toLoad = 'external.html' + extReg;
function loadContent() {
$(reg).load(toLoad,'',getSrcPaths())
}
function getSrcPaths() {
$(reg + ' #image0').delay(200).fadeIn('slow');
$(reg + ' #image1').delay(200).fadeIn('slow');
// or however you want to store/display the images
}
}
Dann rufen Sie beim Laden einfach ajaxContent an
<body onload="ajaxContent('#hiddenContainer','#imgContainer')">
....
</body>
Dies ist natürlich nicht wirklich relevant, wenn Ihre Bilder groß sind oder wenn das Laden von Seiten negativ beeinflusst wird. Obwohl Sie die Bilder jetzt tatsächlich haben, können Sie sie sogar nur anzeigen, anstatt sie auszublenden. Kommt genau darauf an, wie viel Sie brauchen, um die Originale zu manipulieren, nehme ich an.