jquery - 检测到特定的 "background image"是可见的然后做一些事情

Question

我从我之前发布的通用“检测图像”问题中稍微提炼了我的问题。

我想检测背景图像，检测完成后，从 DOM 中完全不同的元素中删除一个类。

HTML:

<div class="rh-big-hero-wrapper" style="background-image:url('bg-sample-10.jpg');">

JS:

$(function() {
'use strict';

    var heroElem = $('.rh-big-hero-wrapper');
    var imgElem = ('bg-sample-10.jpg');
    var visClass = $('rh-notvisible');

           // hides article product relation in hero.  
    $('.rh-big-hero-heading-product-item-inner').addClass('rh-notvisible'); {
        //console.log('class has been added...just checking, cause Im loosing my mind');
    };


    heroElem.css('background-image');
        // console.log(heroElem);
    heroElem.find(imgElem); {
        // console.log('displaying', imgElem);
    if($(this).is(':visible')) {
        console.log(imgElem, 'is visible');
        $('.rh-big-hero-heading-product-item-inner').removeClass(visClass);
        };
    } });

感谢您的建议、解决方案和高级指导。

Answer 1

您可以创建一个虚拟图像并将其指定为 src 您要查找的图像的路径(在本例中为 background-image)。然后给它分配一个加载事件并监听它:

var element_backgroundimage = $('#element').css('background-image'),// url("image.jpg")
    image_value = element_backgroundimage.replace('url(', '').replace(')', '').replace(/\"/gi, ''),
    $img = $('<img src="' + image_value + '" />');

$img
    .one('load', function() {

        console.log("loaded");// Do something here

    })
    .filter(function() { // If the image is already loaded, trigger the above load function

        if (this.complete) {
            $img.load();
        }

    });

JSFiddle demo

---

(从背景图像 url 属性中获取图像路径 credits 。)