Question

我创建了一个Google Chrome扩展程序来替换第三方网站上的某些图片。我已经实现了所有编程部分，但我的一个要求是

在较慢的网络连接上，原始图像不应该是可见的直到它被新图像取代

我不确定它是否可以实现。我想知道我应该在这里附上什么样的事件。专家可以就此提出意见吗？

这是我所做的工作。

// get current websites base url
var current_website = window.location.href;

//run the code on specific pages
if ($.inArray(current_website, config.target_websites) != -1) {

    config.image_config.forEach(function (obj) {


        var src = obj.src;
        var target = obj.target;

        /**find all the occurances in the <img> tag */
        var key = 'img[src*="' + src + '"]';
        var img = $(key);

        /**replace it with the target image*/
        img.attr('src', target);


        /** check the inline CSS*/
        $("[style*=background-image]").css('background-image', function (i, oldimg) {
            return oldimg.indexOf(src) == -1 ? oldimg : 'url(' + target + ')';
        });

        /***check all the external styles for the image*/
        $('*').each(function () {
            if ($(this).css('background-image').indexOf(src) != -1) {
                $(this).css('background-image', 'url(' + target + ')');
            }
        });


    });



}

Answer 1

由于您已经在使用jQuery，如果您不反对小型库（7.25 KB），则可以使用jQuery插件imagesloaded。

基本用法：

// options
$('#container').imagesLoaded( {
  // options...
  },
  function() {
    // your code to run after load
  }
);

然后，您可以在加载时执行简单的$('img').hide()，并在所有图片加载到特定图片后$('img').show()。

您可以在演示中看到它适用于已动态插入到页面中的图像，这样可以满足您在替换之前隐藏key图像的要求。

http://imagesloaded.desandro.com/

在chrome扩展上调整load事件

1 个答案: