javascript - <a> onload 的替代方案是什么？

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);
                }
            }
        });
    });
};

如何在加载 *a* 时使用 coverLookout 函数而不是 onmouseover？ *A* onload 不起作用，因为 onload 我只能与 *body* 一起使用。但是其他标签如何onload呢？

Answer 1

A onload doesn't work because onload I can use only with body. But how do onload for other tags?

不，它适用于具有 load 的元素事件。 a没有加载事件，因为它从来没有要加载的东西。全部a内容是内联的。 load涉及图像、脚本和样式表等加载单独资源的内容。

img有一个load事件，如果您正在谈论链接加载中的图像。您必须确保在设置 img 之前 Hook 事件。源(onload 属性有效)，或检查 complete如果稍后 Hook 事件，则在元素上标记以查看它是否已经完成。

---

从下面的评论来看，听起来您想更改 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">

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

---

I want to while page is loading src in img will be changed by script

您的意思是这些链接所在的页面何时加载？好的。这将出现在 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");
    });
});