Question

我有一个新的问题，一个画廊停止工作。我知道有关于attr（＆＃39; src＆＃39;）的问题，我认为这是无关的，因为它至少工作了2年。

背景

我在2013年建立了一个网站，其中包括一个在jquery（1.8）上运行的图库 - 该网站本身就是Wordpress。

我们将网站交给了客户，并且他们要管理更新等。不用说，他们保持WP最新状态是不好的，几周后他们从3.x更新到当前版本。有一些轻微的打嗝，但所有都是固定的 - 或者我们认为。上周他们注意到画廊没有用。我知道超过一个DOUBT的阴影，大约一年前它运行良好 - 我为他们移动了主机，但现在使用jquery进行图像交换不起作用（参见下面的代码）。不可否认，在过去的18个月里，我没有使用过jquery或WP，但是我可以告诉jquery代码没问题。在wim上，我将WP 1.8换成了WP 2.X但它仍然不起作用。我的直觉告诉WP更新是问题，但我不确定原因。

我不确定这是否是WP问题，可能包含一个脚本（不是专家）。

我会将所有图片加载到浏览器中，以便为交换预加载它们。

控制台根本没有丢失任何错误。

工作原理

我加载了两个图像版本的拇指和全尺寸图像。我在加载时使用css隐藏图像。当用户点击拇指时，我使用图像的WP id将两者绑在一起（使其成为DOM id的一部分）。单击时，wp id将传递给一个函数，该函数将获取所有完整大小的图像详细信息，然后刷新主库。

TLDR

以下代码用于交换图库上的图像，用户一周左右更新了WP，他们注意到它停止工作。我不确定WP更新是否是问题，因为脚本的所有其他部分都可以正常工作。

//main js object
var ae = {
    switch_photo:function(pid) // method called from jq events
    {
        // pid - is the wp id that is shared between the gallery images and the thumbnails

                // is this a video or image gallery? (video galleries still work fine)
                var gal_type = $("#gallery-main-thumbs").data("galt");

                if(gal_type == "image")
                {

                    // there are two versions of each image loaded, the thumbnail and the full sized 
                    // full sized images are loaded then hidden with css so the image is available to be swapped.
                    // both images have id's that include the wp post id (the pid argument) - taht is how they are kept together
                    //  the var declarations below use this shared wp-id to get the attributes from the full sized image
                    var alt = $("#display_"+pid).attr("alt");
                    var bgcolor  = "#fff";
                    var src = $("#display_"+pid).attr("src");
                    var w = $("#display_"+pid).attr("width");
                    var h = $("#display_"+pid).attr("height");

                    // if the image is portrait set the bg to black for appearence's sake
                    if (parseInt(w) <= 670)
                    {
                        bgcolor = "#000";
                    }

                // shows the src url of the full sized  which is valid.
                console.log(src)

                // switch the bg color based upon image dimensions
                $("#gallery-focus").css("background-color", bgcolor);

                //swap out the main image - everything works except the src.
                $("#main-photo").attr("src", src);
                $("#main-photo").attr("width", w);
                $("#main-photo").attr("height", h);

                }
                else
                {
                    //video galleries - working fine.
                    var alt = $("#image_"+pid).children("img").attr("alt");
                    $("#gallery-focus").html($("#embed_"+pid).html());
                }

                $("#main-caption").text(alt);
    }
}

Answer 1

如果这是您正在使用的真实代码，请先在;之后添加console.log(src)，然后再将alt定义为两次。将var alt;置于if条件之外，然后在if语句中将其设置为alt = $("#display_"+pid).attr("alt");，并在else语句中将其设置为alt = $("#image_"+pid).children("img").attr("alt");。与bgcolor相同。此外，您在对象定义ae = {...};的末尾也缺少分号。

var ae = {
    // method called from jq events
    switch_photo: function(pid) {
        // pid - is the wp id that is shared between the gallery images and the thumbnails

        // is this a video or image gallery? (video galleries still work fine)
        var gal_type = $("#gallery-main-thumbs").data("galt");
        var alt, bgcolor;

        if(gal_type == "image") {

            // there are two versions of each image loaded, the thumbnail and the full sized 
            // full sized images are loaded then hidden with css so the image is available to be swapped.
            // both images have id's that include the wp post id (the pid argument) - taht is how they are kept together
            //  the var declarations below use this shared wp-id to get the attributes from the full sized image
            alt = $("#display_"+pid).attr("alt");
            var src = $("#display_"+pid).attr("src");
            var w = $("#display_"+pid).attr("width");
            var h = $("#display_"+pid).attr("height");

            // if the image is portrait set the bg to black for appearence's sake
            if (parseInt(w) <= 670) {
                bgcolor = "#000";
            } else{
                bgcolor  = "#fff";
            }

            // shows the src url of the full sized  which is valid.
            console.log(src);

            // switch the bg color based upon image dimensions
            $("#gallery-focus").css("background-color", bgcolor);

            //swap out the main image - everything works except the src.
            $("#main-photo").attr("src", src);
            $("#main-photo").attr("width", w);
            $("#main-photo").attr("height", h);
        } else {
            //video galleries - working fine.
            alt = $("#image_"+pid).children("img").attr("alt");
            $("#gallery-focus").html($("#embed_"+pid).html());
        }

        $("#main-caption").text(alt);
    }
};

除此之外，我没有看到代码有任何问题。你有任何控制台错误吗？

Answer 2

发现问题...默认情况下，wp更新是为响应图像添加srcset属性到wp图像标记。我在我的功能中禁用了这个功能（网站在13年初的12年末建成无响应）：

function disable_srcset( $sources ) {
return false;
}
add_filter( 'wp_calculate_image_srcset', 'disable_srcset' );

这解决了我的问题。

image src swap停止工作（jquery WP）

2 个答案: