Question

我在相同位置的同一页面上有很多图像。有些小组有opacity = 0（div），并在想要展示时设置opacity = 1。

但是，显然，所有图像都在开头加载（93Mb）。

所以，我想根据请求加载图片。加载div的内容和包含的图像。

我从这开始：

if($('#id_of_div').css('opacity') == 1) {
    loadTheCode();
}

然后我发现这个（load html after opacity = 0）是由Rory McCrossan在2年前写的：

function cargarContenido(pagina) {
    $('#content').animate(
        { "opacity": "0" }, 
        function() {
            $("#loadimage").show(); // show a loading image
            // load content when opacity = 0 animation finished
            $("#content").load(
                pagina, 
                function() {
                    $("#loadimage").hide(); // hide a loading image
                    // make opacity = 1 when content has been loaded
                    $('#content').animate({ "opacity": "1" });
                }
            )
        }
    );
}

但是，我不知道这个jQuery函数是如何工作的，如何实现它以及如何重写所需的代码。

当代码加载时，图像也会加载？

可以通过PHP执行MySQL请求吗？

我迷路了：S

非常感谢你！

Answer 1

作为框架的

jQuery通常具有函数调用的结构加上callback，一旦原始函数成功执行，就会调用它。回调是jQuery中广泛使用的功能，可以异步控制事件和动作。

所以代码执行以下操作，

通过将content属性移动到0来动画DOM opacity元素。由于未指定持续时间，因此默认情况下 400ms （可能有是第二个论点）。
接下来是回调函数。因此，在jQuery为opacity设置动画后，会触发回调函数，其中会显示加载占位符（loadimage）。
.load()函数似乎调用存储在变量pagina中的网址。成功执行load事件后，.load()的另一个回调函数被调用。
此例程现在填充由innerHTML ID标识的DOM元素的content。
隐藏加载占位符图片，并在 400ms 中再次将content置于不透明度1。

因此，您可以在此处调用您创建的服务器上的另一个端点，以仅返回部分页面内容（可能是内部API）。该API将在内部根据数据的某些有效负载执行任何需要完成的数据库查询。（请注意，您还可以通过.load()调用发送一些有效负载。）

在此处查看文档： .load()，.animate()，.show()

div opacity = 1时加载代码片段

1 个答案: