在用户单击 javascript/jquery 中的按钮之前，如何防止加载元素？

Question

我已经搜索 Google 一段时间了，但找不到合适的答案。

我有一个需要弹出式图库的网站项目，但在用户单击 link 后，该图库应该加载到所有其他元素之上。就像在 Facebook 中一样，当您打开视频时，它会在所有其他人面前创建一个固定的 div，然后加载视频。

在 css 我试过 "display: none" 但它减慢了页面加载时所有其他元素的加载速度。我应该让它只在需要时加载，这样初始加载时间就不会受到影响。

Answer 1

您需要避免设置图像的 src 属性，直到您想要承担加载图像的开销。

由于在渲染页面时无法设置src，所以需要将其放在其他地方，以便您的脚本可以找到它。我建议使用数据属性。

HTML:

<IMG data-src="http://mydomain/myimage1.png"/>
<IMG data-src="http://mydomain/myimage2.png"/>
<IMG data-src="http://mydomain/myimage3.png"/>
<A id="MyLink" href="#">Click here to load images</A>

还有你的jquery

$("#MyLink").click(function(){
    $("IMG[data-src]").each(function(){
        $(this).attr("src",$(this).data("src"));
    });
});

jquery会遍历页面上所有的IMG元素，读取data-src属性并塞入src属性，这会导致图片加载。没有 data-src 属性的图像将被跳过（如果页面上有一些不需要延迟加载行为的普通图像）。

在用户单击 javascript/jquery 中的按钮之前，如何防止加载元素？

How can I prevent an element to load until such time when the user clicks a button in javascript/jquery?

html

javascript

jquery

javascript-events