Question

我有这个HTML：

<a onmouseover="coverLookout(this,0)" style="width:100%;overflow:hidden" href="#jtCr4NsVySc" class="youtube">
    <img id="video_642" style="width:100%;margin-left:0;max-width:100%;visibility:visible" src="https://img.youtube.com/vi/jtCr4NsVySc/mqdefault.jpg">
    <span></span>
</a>

和js：

var yt=new Array('maxresdefault.jpg','mqdefault.jpg');
var coverLookout = function(block,i){
    console.log(i);
    var code=$(block).attr('href').toString().substr(1);
    var url = "https://img.youtube.com/vi/" + code + "/" + yt[i];
    $(function($){
        $.ajax({
            url: "function_js.php?page=check_img",
            data: {"url":url},
            cache: false,
            success: function(response){
                console.log(response);
                if(response=="200"){
                    $(block).find("img").attr('src',url);return;
                }else{
                    coverLookout(block,++i);
                }
            }
        });
    });
};

如何在加载coverLookout而不是*a*时使用onmouseover功能？ *A* onload无效，因为onload我只能使用*body*。但onload如何处理其他标签？

Answer 1

onload不起作用，因为onload我只能用于body。但是如何为其他标签加载？

不，它适用于具有load事件的元素。 a没有加载事件，因为它永远不会加载。所有a内容均为内联。 load涉及图像，脚本和样式表之类的东西，它们加载了一个单独的资源。

如果您在链接加载中谈论图片，则

img会有load个事件。您必须确保在设置img源（onload属性有效）之前挂钩事件，或者检查元素上的complete标志是否挂钩事后来看看它是否已经完成。

从下面的评论中，您可能希望在点击链接时更改img的来源。你可以这样做：

<a onclick="document.getElementById('video_642').src = '/new/src/here.png' ...

...或者当您使用jQuery时，这将处理所有youtube链接：

$("a.youtube").click(function() { $(this).find("img").attr("src", "/new/src/here.png"); });

但是用户可能看不到它，因为当跟踪链接时，浏览器会立即拆除页面。如果你确定它已经在缓存中，你可以提高用户看到它的机会，方法是把它放在你的页面上，但隐藏起来：

<img style="display: none" src="/new/src/here.png">

...所以浏览器将其放在缓存中以便在拆除页面之前显示它。

我想在页面加载时，img中的src将被脚本更改

您的意思是这些链接所在的页面正在加载？好的。这将放在script末尾的body标记中（就在结束</body>元素之前：

// Find all images within a.youtube links and change their `src` $("a.youtube img").each(function() { var img = $(this); // Save current src so we can put it back later img.attr("data-real-src", this.src); // Set new source this.src = "/new/src/here.png"; }); // Then when the page is done loading... $(window).on("load", function() { // Restore the original `src` values on the images $("img[data-real-src]").each(function() { var img = $(this); img.attr("src", img.attr("data-real-src")).removeAttr("data-real-src"); }); });

Answer 2

onload函数仅适用于<body>，因此在加载文档后（在$(document).ready()函数下收集所有a标记并根据其索引调用该函数。

var els = document.getElementsByTagName("a");
for(var i = 0, l = els.length; i < l; i++) {
coverLookout(els[i],i);
 }

什么是<a>?</a> onload的替代方案

2 个答案: