我如何获得网站中最上面的图片的链接？答案

【问题标题】：How do i get the link of the topmost positioned image in a website?我如何获得网站中最上面的图片的链接？
【发布时间】：2014-05-19 10:47:32
【问题描述】：

我正在编写一个脚本，它需要位于任何网站最顶部的图像的 src，不是源中的 FIRST 图像，而是定位的图像最高的。

我尝试了一些非常基本的方法，即检索第一个图像标记，但这不适用于由 css/jquery/javascript 定位的图像。

所以知道我怎么能做到这一点吗？ |----------------- | .....title.... | |------| | |image | <==== link needed | |------| |//text content |Lorem dolor ipsum

【问题讨论】：

请发布您的 html 代码。谢谢
好吧，它应该适用于任何网站......没有特定的html

标签： javascript jquery python html css

【解决方案1】：

我不确定 jQuery 的回复，但我相信这仍然只会给你的相对图像坐标。按照这个较早的帖子显示get the absolute x, y coordinates of a html element on a page的方法，并窃取相同的方法来自PrototypeJS，下面的代码应该能满足你的需要，

注意事项，我认为 0 顶部检查可以安全地用于确定图像是否是隐形与否，但它可能是有问题的。此外，这只会获取 img 标签内的图像，而不是图像链接或任何使用 css 设置的内容。

// cumulative offset function stolen from PrototypeJS
var cumulativeOffset = function(element) {
    var top = 0, left = 0;
    do {
        top += element.offsetTop  || 0;
        left += element.offsetLeft || 0;
        element = element.offsetParent;
    } while(element);

    return {
        top: top,
        left: left
    };
};

// get all images
var results = document.getElementsByTagName("img");
var images = [];
for (result in results) {
    if (results.hasOwnProperty(result)) {
        images.push(results[result]);
    }
}

// map our offset function across the images
var offsets = images.map(cumulativeOffset);

// pull out the highest image by checking for min offset
// offset of 0 means that the image is invisible (I think...)
var highest = images[0];
var minOffset = offsets[0];
for (i in offsets) {
    if (minOffset.top === 0 ||
            (offsets[i].top > 0 && offsets[i].top < minOffset.top)) {
        minOffset = offsets[i];
        highest = images[i];
    }
}

// highest is your image element
console.log(highest);

【讨论】：

【解决方案2】：

您需要比较每个元素的.y 属性。

function getTopMostImage() {
    //Get all images
    var imgs = document.querySelectorAll("img");

    //Define a variable that marks the topmost image
    var topmost = imgs[0];

    //Check all image positions and mark the topmost
    for (i = 1; i < imgs.length; i++) {
        if (topmost.y > imgs[i].y)
            topmost = imgs[i];
    }
    return topmost.src;
}

【讨论】：

【解决方案3】：

加载后，您可以通过 first() 检查 Dom 中存在的第一个 img 元素，文档为 here 希望对你有帮助

【讨论】：

【解决方案4】：

// Use the most appropriate selector for your images such as "body img" or bla bla...
var images = jQuery('img');
var topMostImageIndex = 0;

for (var i = 0; i < images.length; i++) {

    if (jQuery(images[i]).position().top < jQuery(images[topMostImageIndex]).position().top) {

        topMostImageIndex = i;
    }
}

// It's the top-most image
images[topMostImageIndex];

【讨论】：