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!

2
SDD 9 Okt. 2012 im 00:57

3 Antworten

Beste Antwort

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>
2
mukama 8 Okt. 2012 im 21:29

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');
1
saml 8 Okt. 2012 im 21:26

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.

0
Mike H. 8 Okt. 2012 im 21:35