Question

我稍微改进了我的问题，从通用＆＃34;检测图像＆＃34;我之前发布的问题。

我想检测背景图片，一旦完成，就从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

（从background-image网址属性credits获取图片路径。）

检测特定的＆＃34;背景图像＆＃34;是可见的，然后做一些事情

1 个答案: